Merge pull request #6541 from abpframework/docs/6422

docs: update list-service docs with custom variables

docs/en/UI/Angular/List-Service.md

@@ -68,6 +68,50 @@ Bind `ListService` to ngx-datatable like this:
 </ngx-datatable>
 ```
 
+## Extending query with custom variables
+
+You can extend the query parameter of the `ListService`'s `hookToQuery` method.
+
+Firstly, you should pass your own type to `ListService` as shown below:
+
+```typescript
+constructor(public readonly list: ListService<BooksSearchParamsDto>) { }
+```
+
+Then update the `bookStreamCreator` constant like following:
+
+```typescript
+const bookStreamCreator = (query) => this.bookService.getList({...query, name: 'name here'});
+```
+
+You can also create your params object.
+
+Define a variable like this:
+
+```typescript
+booksSearchParams = {} as BooksSearchParamsDto;
+```
+
+Update the `bookStreamCreator` constant:
+
+```typescript
+const bookStreamCreator = (query) => this.bookService.getList({...query, ...this.booksSearchParams});
+```
+
+Then you can place inputs to the HTML:
+
+```html
+<div class="form-group">
+  <input
+    class="form control"
+    placeholder="Name"
+    (keyup.enter)="list.get()"
+    [(ngModel)]="booksSearchParams.name"
+  />
+</div>
+```
+
+`ListService` emits the hookToQuery stream when you call the `this.list.get()` method.
 
 ## Usage with Observables