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.