From 78c6b051a8587aba6b0f5b875f71f62f151fbb8d Mon Sep 17 00:00:00 2001 From: Arman Ozak Date: Mon, 29 Jun 2020 15:19:56 +0300 Subject: [PATCH 1/3] docs: update ListService.md according to ngx-datatable --- docs/en/UI/Angular/List-Service.md | 83 +++++++++++++----------------- 1 file changed, 37 insertions(+), 46 deletions(-) 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. From 95ca82762d17c0612355ded869348c3807d7a4d5 Mon Sep 17 00:00:00 2001 From: Arman Ozak Date: Mon, 29 Jun 2020 20:00:52 +0300 Subject: [PATCH 2/3] docs: add v3 breaking change for ListService --- docs/en/UI/Angular/List-Service.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/docs/en/UI/Angular/List-Service.md b/docs/en/UI/Angular/List-Service.md index b42d11d4a5..6d16b73ae8 100644 --- a/docs/en/UI/Angular/List-Service.md +++ b/docs/en/UI/Angular/List-Service.md @@ -154,3 +154,26 @@ You may use observables in combination with [AsyncPipe](https://angular.io/guide ``` + +## Breaking Change with ABP v3.0 + +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: + +```html + + +``` + +As of v3.0, with ngx-datatable, the `page` property has to be set as `0` for inital page. Therefore, if you used `ListService` on your tables before and are going to keep `abp-table`, you need to make the following change: + +```html + + +``` + +**Important Note:** The `abp-table` is not removed, but is deprecated and will be removed in the future. Please consider switching to ngx-datatable. From 9ba6c9fa486360d31b75c391a3d94e523c7b67ef Mon Sep 17 00:00:00 2001 From: Arman Ozak Date: Mon, 29 Jun 2020 21:35:45 +0300 Subject: [PATCH 3/3] docs: use js for highlighting --- docs/en/UI/Angular/List-Service.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/en/UI/Angular/List-Service.md b/docs/en/UI/Angular/List-Service.md index 6d16b73ae8..900606d725 100644 --- a/docs/en/UI/Angular/List-Service.md +++ b/docs/en/UI/Angular/List-Service.md @@ -73,7 +73,7 @@ Bind `ListService` to ngx-datatable like this: You may use observables in combination with [AsyncPipe](https://angular.io/guide/observables-in-angular#async-pipe) of Angular instead. Here are some possibilities: -```ts +```js book$ = this.list.hookToQuery(query => this.bookService.getListByInput(query)); ``` @@ -95,7 +95,7 @@ You may use observables in combination with [AsyncPipe](https://angular.io/guide ...or... -```ts +```js @Select(BookState.getBooks) books$: Observable; @@ -127,7 +127,7 @@ You may use observables in combination with [AsyncPipe](https://angular.io/guide `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 +```js this.bookService.createByInput(form.value) .subscribe(() => { this.list.get(); @@ -138,7 +138,7 @@ You may use observables in combination with [AsyncPipe](https://angular.io/guide ...or... -```ts +```js this.store.dispatch(new DeleteBook(id)).subscribe(this.list.get); ```