DevExtreme Angular - Local Array
To bind a widget to a local array, pass this array to the widget's dataSource option. We recommend that you also use the keyExpr option (if the widget has it) to specify the key field.
- <dx-data-grid
- [dataSource]="employees"
- keyExpr="ID">
- </dx-data-grid>
- import { Component } from '@angular/core';
- import { Employee, Service } from './app.service';
- @Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
- })
- export class AppComponent {
- employees: Employee[];
- constructor(service: Service) {
- this.employees = service.getEmployees();
- }
- }
- import { Injectable } from '@angular/core';
- export class Employee {
- ID: Number,
- FirstName: String,
- LastName: String
- }
- let employees: Employee[] = [
- { ID: 1, FirstName: 'Sandra', LastName: 'Johnson' },
- { ID: 2, FirstName: 'James', LastName: 'Scott' },
- { ID: 3, FirstName: 'Nancy', LastName: 'Smith' }
- ];
- @Injectable()
- export class Service {
- getEmployees(): Employee[] {
- return employees;
- }
- }
- import { BrowserModule } from '@angular/platform-browser';
- import { NgModule } from '@angular/core';
- import { AppComponent } from './app.component';
- import { DxDataGridModule } from 'devextreme-angular';
- import { Service } from './app.service';
- @NgModule({
- declarations: [
- AppComponent
- ],
- imports: [
- BrowserModule,
- DxDataGridModule
- ],
- providers: [
- Service
- ],
- bootstrap: [AppComponent]
- })
- export class AppModule { }
If you plan to update the data or need to handle data-related events, wrap the array in an ArrayStore. You can use the store's key option instead of the widget's keyExpr to specify the key field. You can further wrap the ArrayStore in a DataSource if you need to filter, sort, group, and otherwise shape the data.
The following example declares an ArrayStore, wraps it in a DataSource, and binds the DataGrid widget to this DataSource:
- <dx-data-grid
- [dataSource]="employeesDataSource">
- </dx-data-grid>
- import { Component } from '@angular/core';
- import { Service } from './app.service';
- import ArrayStore from 'devextreme/data/array_store';
- import DataSource from 'devextreme/data/data_source';
- @Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
- })
- export class AppComponent {
- constructor(service: Service) {
- const employeesStore = new ArrayStore({
- data: service.getEmployees(),
- key: 'ID',
- onLoaded: function() {
- // ...
- }
- });
- this.employeesDataSource = new DataSource({
- store: employeesStore,
- sort: 'LastName'
- });
- }
- employeesStore: ArrayStore;
- employeesDataSource: DataSource;
- }
If you have technical questions, please create a support ticket in the DevExpress Support Center.