Implement virtual paging in ag grid angular2
Implementing the Angular 2 Datagrid Angular 2 New features adding Large number of data quick loading in virtual scroll in ag grid adding new features and good looking the data grid.
 |
| how to impleted ag grid angularjs 2 |
Implementing the Angular 2 Datagrid
Dependencies
"dependencies": {
...
"ag-grid": "6.2.x",
"ag-grid-ng2": "6.2.x"
}
@NgModule({
imports: [
BrowserModule,
AgGridModule.withComponents(),
...
})
Configuring ag-Grid in Angular 2
Events: All data out of the grid comes through events. These use Angular 2 event bindings eg (modelUpdated)="onModelUpdated()". As you interact with the grid, the different events are fixed and output text to the console (open the dev tools to see the console).
Properties: All the data is provided to the grid as Angular 2 bindings. These are bound onto the ag-Grid properties bypassing the elements attributes. The values for the bindings come from the parent controller.
Attributes: When the property is just a simple string value, then no binding is necessary, just the value is placed as an attribute eg rowHeight="22". Notice that boolean attributes are defaulted to 'true' IF they attribute is provided WITHOUT any value. If the attribute is not provided, it is taken as false.
Grid API via IDs: The grid in the example is created with an id by marking it with #agGrid. This in turn turns into a variable which can be used to access the grid's controller. The buttons Grid API and Column API buttons use this variable to access the grids API (the API's are attributes on the controller).
Changing Properties: When a property changes value, AngularJS automatically passes the new value onto the grid. This is used in the following locations:
a) The 'quickFilter' on the top right updates the quick filter of the grid. b) The 'Show Tool Panel' checkbox has it's value bound to the 'showToolPanel' property of the grid. c) The 'Refresh Data' generates new data for the grid and updates the rowData property.
Creating Grids with Markup
<ag-grid-column headerName="Name" field="name" [width]="150"></ag-grid-column>
Cell Rendering & Cell Editing using Angular 2
It is possible to build cellRenders, cellEditors and filters using Angular 2. Doing each of these is explained in the section on each.
Although it is possible to use Angular 2 for your customisations of ag-Grid, it is not necessary. The grid will happily work with both Angular 2 and non-Angular 2 portions (eg cellRenderers in Angular 2 or normal JavaScript). If you do use Angular 2, be aware that you are adding an extra layer of indirection into ag-Grid. ag-Grid's internal framework is already highly tuned to work incredibly fast and does not require Angular 2 or anything else to make it faster. If you are looking for a lightning fast grid, even if you are using Angular 2 and the ag-grid-ng2 component, consider using plain ag-Grid Components (as explained on the pages for rendering etc) inside ag-Grid instead of creating Angular 2 counterparts.
Known Issues
"Attempt to use a dehydrated detector"
If you are getting the above error, then check out this post where jose_DS shines some light on the issue.