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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.