Querying Lists Easily with ListService

ListService is not provided in root. The reason is, this way, it will clear any subscriptions on component destroy. You may use the optional LIST_QUERY_DEBOUNCE_TIME token to adjust the debounce behavior.

Bind ListService to ngx-datatable like this:

<ngx-datatable
  [rows]="items"
  [count]="count"
  [list]="list"
  default
>
  <!-- column templates here -->
</ngx-datatable>

…or…

  @Select(BookState.getBooks)
  books$: Observable<BookDto[]>;
  @Select(BookState.getBookCount)
  bookCount$: Observable<number>;
  ngOnInit() {
    this.list.hookToQuery((query) => this.store.dispatch(new GetBooks(query))).subscribe();
  }

<!-- simplified representation of the template -->
<ngx-datatable
  [rows]="(books$ | async) || []"
  [list]="list"
  default
>
  <!-- column templates here -->
</ngx-datatable>

ListService exposes a get method to trigger a request with the current query. So, basically, whenever a create, update, or delete action resolves, you can call this.list.get(); and it will call hooked stream creator again.

ListService exposes a filter property that will trigger a request with the current query and the given search string. All you need to do is to bind it to an input element with two-way binding.

<!-- simplified representation -->
<input type="text" name="search" [(ngModel)]="list.filter">

We had to modify the ListService to make it work with ngx-datatable. Previously, the minimum value for page property was 1 and you could use it like this:

<!-- other bindings are hidden in favor of brevity -->
<abp-table
  [page]="list.page + 1"
  (pageChange)="list.page = $event - 1"

Important Note: The abp-table is not removed, but is deprecated and will be removed in the future. Please consider switching to ngx-datatable.