imhven
/
abp
mirror of https://github.com/abpframework/abp
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

docs: update ListService.md according to ngx-datatable

Browse Source
pull/4526/head
Arman Ozak 6 years ago
parent bc9bed8b61
commit 78c6b051a8
1 changed files with 37 additions and 46 deletions
Show Stats Download Patch File Download Diff File

83
docs/en/UI/Angular/List-Service.md
Unescape View File

@ -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 ```html
<abp-table <ngx-datatable
[value]="book.items" [rows]="items"
[(page)]="list.page" [count]="count"
[rows]="list.maxResultCount" [list]="list"
[totalRecords]="book.totalCount" default
[headerTemplate]="tableHeader"
[bodyTemplate]="tableBody"
[abpLoading]="list.isLoading$ | async"
> >
</abp-table> <!-- column templates here -->
</ngx-datatable>
<ng-template #tableHeader>
<tr>
<th (click)="nameSort.sort('name')">
{%{{{ '::Name' | abpLocalization }}}%}
<abp-sort-order-icon
#nameSort
sortKey="name"
[(selectedSortKey)]="list.sortKey"
[(order)]="list.sortOrder"
></abp-sort-order-icon>
</th>
</tr>
</ng-template>
<ng-template #tableBody let-data>
<tr>
<td>{%{{{ data.name }}}%}</td>
</tr>
</ng-template>
``` ```
## Usage with Observables ## 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: 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 ```html
<!-- simplified representation of the template --> <!-- simplified representation of the template -->
<abp-table <ngx-datatable
[value]="(book$ | async)?.items || []" [rows]="(book$ | async)?.items || []"
[totalRecords]="(book$ | async)?.totalCount" [count]="(book$ | async)?.totalCount || 0"
[list]="list"
default
> >
</abp-table> <!-- column templates here -->
</ngx-datatable>
<!-- DO NOT WORRY, ONLY ONE REQUEST WILL BE MADE --> <!-- DO NOT WORRY, ONLY ONE REQUEST WILL BE MADE -->
``` ```
@ -128,32 +110,41 @@ You may use observables in combination with [AsyncPipe](https://angular.io/guide
```html ```html
<!-- simplified representation of the template --> <!-- simplified representation of the template -->
<abp-table <ngx-datatable
[value]="books$ | async" [rows]="(books$ | async) || []"
[totalRecords]="bookCount$ | async" [count]="(bookCount$ | async) || 0"
[list]="list"
default
> >
</abp-table> <!-- column templates here -->
</ngx-datatable>
``` ```
> 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 ## 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. `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 ```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... ...or...
```ts ```ts
this.bookService.createByInput(form.value) this.store.dispatch(new DeleteBook(id)).subscribe(this.list.get);
.subscribe(() => {
this.list.get();
// Other subscription logic here
})
``` ```
> 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 ## 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. `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.

Write Preview
Loading…
Cancel
Save