This sample demonstrates the usage of angular grid with Observables using the async pipe. Paging, sorting and grouping can be performed in this sample.
Order ID | Customer Name | Ship Name | Ship City |
|---|---|---|---|
| No records to display |
Grid can be bound with Observable or Promise object. The Observable or Promise object should be piped into grid using the async pipe.
When performing grid actions such as paging, sorting and grouping etc. the " dataStateChange " event will be triggered and we need to resolve the Observable based on the new grid data state. With AsyncPipe we use observables directly to the data, without having to store the result on an intermediate property or variable.
In this demo, simply select the paging and click the column header to sort a column, multiple sorting is also enabled. To group a specify column, drag and drop the column in the group drop area. To enable paging, sorting and grouping, set the allowPaging , allowSorting and allowGrouping as true.
Injecting Module:
Grid component features are segregated into individual feature-wise modules. To use the paging ,sorting and grouping features, inject the PageService, SortService and GroupService respectively into the @NgModule.providers section.