diff --git a/docs/en/UI/Angular/List-Service.md b/docs/en/UI/Angular/List-Service.md index 7cc31a46fdc..016b8911599 100644 --- a/docs/en/UI/Angular/List-Service.md +++ b/docs/en/UI/Angular/List-Service.md @@ -68,6 +68,50 @@ Bind `ListService` to ngx-datatable like this: ``` +## 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) { } +``` + +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 +
+ +
+``` + +`ListService` emits the hookToQuery stream when you call the `this.list.get()` method. ## Usage with Observables