|
|
|
@ -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
|
|
|
|
|
|
|
|
|
|