diff --git a/docs/en/UI/Angular/List-Service.md b/docs/en/UI/Angular/List-Service.md index b3c8571866..b42d11d4a5 100644 --- a/docs/en/UI/Angular/List-Service.md +++ b/docs/en/UI/Angular/List-Service.md @@ -53,43 +53,22 @@ class BookComponent { } ``` -> Noticed `list` is `public` and `readonly`? That is because we will use `ListService` properties directly in the component's template. That may be considered as an anti-pattern, but it is much quicker to implement. You can always use public component properties instead. +> Noticed `list` is `public` and `readonly`? That is because we will use `ListService` directly in the component's template. That may be considered as an anti-pattern, but it is much quicker to implement. You can always use public component members to expose the `ListService` instance instead. -Place `ListService` properties into the template like this: +Bind `ListService` to ngx-datatable like this: ```html - - - - - - - {%{{{ '::Name' | abpLocalization }}}%} - - - - - - - - {%{{{ data.name }}}%} - - + + ``` + ## Usage with Observables You may use observables in combination with [AsyncPipe](https://angular.io/guide/observables-in-angular#async-pipe) of Angular instead. Here are some possibilities: @@ -101,11 +80,14 @@ You may use observables in combination with [AsyncPipe](https://angular.io/guide ```html - - + + ``` @@ -128,32 +110,41 @@ You may use observables in combination with [AsyncPipe](https://angular.io/guide ```html - - + + ``` +> We donot recommend using NGXS store for CRUD pages, unless your application needs to share list information between components or use it later on in another page. + + ## How to Refresh Table on Create/Update/Delete `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. ```ts -this.store.dispatch(new DeleteBook(id)).subscribe(this.list.get); + this.bookService.createByInput(form.value) + .subscribe(() => { + this.list.get(); + + // Other subscription logic here + }); ``` ...or... ```ts -this.bookService.createByInput(form.value) - .subscribe(() => { - this.list.get(); - - // Other subscription logic here - }) + this.store.dispatch(new DeleteBook(id)).subscribe(this.list.get); ``` +> We donot recommend using NGXS store for CRUD pages, unless your application needs to share list information between components or use it later on in another page. + + ## How to Implement Server-Side Search in a Table `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.