diff --git a/docs/en/UI/Angular/List-Service.md b/docs/en/UI/Angular/List-Service.md
index b3c8571866..900606d725 100644
--- a/docs/en/UI/Angular/List-Service.md
+++ b/docs/en/UI/Angular/List-Service.md
@@ -53,59 +53,41 @@ 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:
-```ts
+```js
book$ = this.list.hookToQuery(query => this.bookService.getListByInput(query));
```
```html
-
-
+
+
```
@@ -113,7 +95,7 @@ You may use observables in combination with [AsyncPipe](https://angular.io/guide
...or...
-```ts
+```js
@Select(BookState.getBooks)
books$: Observable;
@@ -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);
+```js
+ 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
- })
+```js
+ 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.
@@ -163,3 +154,26 @@ this.bookService.createByInput(form.value)
```
+
+## 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.