DevExtreme Angular - Overview

The List is a widget that represents a collection of items in a scrollable list.

View Demo

The following code adds a simple List to your page. The simplest configuration of the widget requires only a dataSource to be specified.

jQuery
HTML
JavaScript
<div id="listContainer"></div>
var fruits = ["Apples", "Oranges", "Lemons", "Pears", "Pineapples"];

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

The List supports a great variety of features. To learn more about a particular feature, refer to a dedicated topic in this documentation section.

See Also