DevExtreme Angular - Array Only

To bind the List to an array, pass this array to the dataSource option. The array may contain primitive values...

TypeScript
HTML
  • import { DxListModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • fruits = ["Apples", "Oranges", "Lemons", "Pears", "Pineapples"];
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxListModule
  • ],
  • // ...
  • })
  • <dx-list
  • [dataSource]="fruits">
  • </dx-list>

... or objects.

HTML
TypeScript
  • <dx-list>
  • <dxi-item *ngFor="let item of fruits">
  • <b>{{item.fruit}}</b><br/>
  • <p style="margin:0">{{item.count}}</p>
  • </dxi-item>
  • </dx-list>
  • import { DxListModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • fruits = [
  • { fruit: "Apples", count: 10 },
  • { fruit: "Oranges", count: 12 },
  • { fruit: "Lemons", count: 15 },
  • { fruit: "Pears", count: 20 },
  • { fruit: "Pineapples", count: 3 }
  • ];
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxListModule
  • ],
  • // ...
  • })

If objects in an array need to be processed (sorted, filtered, grouped, etc.), you can create a Query. For example, in the following code, a Query sorts objects in the fruits array by the count field in descending order.

TypeScript
HTML
  • import { DxListModule } from "devextreme-angular";
  • import query from "devextreme/data/query";
  • // ...
  • export class AppComponent {
  • fruits = [
  • { fruit: "Apples", count: 10 },
  • // ...
  • ];
  • getSortedFruits () {
  • return query(this.fruits)
  • .sortBy("count", true)
  • .toArray();
  • }
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxListModule
  • ],
  • // ...
  • })
  • <dx-list
  • [dataSource]="getSortedFruits()">
  • <div *dxTemplate="let data of 'item'">
  • <b>{{data.fruit}}</b><br/>
  • <p style="margin:0">{{data.count}}</p>
  • </div>
  • </dx-list>
See Also