Angular List - Array Only

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

jQuery
JavaScript
const fruits = ["Apples", "Oranges", "Lemons", "Pears", "Pineapples"];

$(function() {
    $("#listContainer").dxList({
        dataSource: fruits
    });
});
Angular
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.

jQuery
JavaScript
const fruits = [
    { fruit: "Apples", count: 10 },
    { fruit: "Oranges", count: 12 },
    { fruit: "Lemons", count: 15 },
    { fruit: "Pears", count: 20 },
    { fruit: "Pineapples", count: 3 }
];

$(function() {
    $("#listContainer").dxList({
        dataSource: fruits,
        itemTemplate: function(data, _, element) {
            element.append(
                $("<b>").text(data.fruit), $("<br />"),
                $("<p>").text(data.count).css("margin", 0)
            )
        }
    });
});
Angular
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.

jQuery
JavaScript
const fruits = [
    { fruit: "Apples", count: 10 },
    // ...
];

$(function() {
    $("#listContainer").dxList({
        dataSource: DevExpress.data.query(fruits)
                        .sortBy("count", true)
                        .toArray(),
        itemTemplate: function(data, _, element) {
            element.append(
                $("<b>").text(data.fruit), $("<br />"),
                $("<p>").text(data.count).css("margin", 0)
            )
        }
    });
});
Angular
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