Angular Markup Components API

This section describes components that can be used when defining a UI component markup.

dxItem

Specifies markup for a UI component item.

import { DxUiWidgetTypes } from "devextreme-angular/ui/ui.widget"
Type: DxUiWidgetTypes.dxItem

The dxItem component defines custom markup for items in layout and collection UI components. dxItem has different properties depending on the UI component where it is used. For a full list of them, see the items property description in a specific UI component's API Reference.

jQuery
HTML
JavaScript
<div id="list">
    <div data-options="dxItem: { text: 'Apples', disabled: true }"></div>
    <div data-options="dxItem: { text: 'Lemons', visible: false }"></div>
    <div data-options="dxItem: { }">
        <!-- Custom markup -->
    </div>
</div>
$(function() {
    $("#list").dxList({/* ... */});
});
Angular
app.component.html
app.module.ts
<dx-list>
    <dxi-item text="Apples" [disabled]="true"></dxi-item>
    <dxi-item text="Lemons" [visible]="false"></dxi-item>
    <dxi-item>
        <!-- Custom markup -->
    </dxi-item>
    <dxi-item>
        <!-- A nested component should be wrapped in an element with a parameterless dxTemplate directive -->
        <div *dxTemplate>
            <dx-button text="I am a nested component"></dx-button>
        </div>
    </dxi-item>
</dx-list>
import { DxListModule } from "devextreme-angular";
// ...
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})
export class AppModule { }
React
App.js
import React from 'react';
import List, { Item } from 'devextreme-react/list';

class App extends React.Component {
    render() {
        return (
            <List>
                <Item text="Apples" disabled={true} />
                <Item text="Oranges" visible={false} />
                <Item>
                    <!-- Custom markup -->
                </Item>
            </List>
        );
    }
}
export default App;
NOTE
dxItem elements are ignored when the dataSource property is defined.

dxTemplate

A custom template's markup.

import { dxTemplate } from "devextreme/core/templates/template"
Type:

Object

The dxTemplate markup component specifies a custom template for a container UI component or a collection UI component's items in Angular apps. Place this template within the UI component's element, specify the template name and assign it to the corresponding xxxTemplate property (for example, itemTemplate, containerTemplate). You can omit specifying the xxxTemplate property if you use the default template name, for instance, item for the itemTemplate, content for the contentTemplate.

Commonly, the dxTemplate is in the component's binding context, but it can differ depending on the UI component element you specify the template for. See the corresponding xxxTemplate property description for more information on a specific template's binding context.

Angular
HTML
TypeScript
<dx-popup
    [width]="300"
    [height]="250"
    contentTemplate="info"
    [visible]="true">
    <div *dxTemplate="let data of 'info'">
        <p>
            Full Name:
            <span>{{employee.FirstName}}</span>
            <span>{{employee.LastName}}</span>
        </p>
        <p>Birth Date: <span>{{employee.BirthDate}}</span></p>
        <p>Address: <span>{{employee.Address}}</span></p>
    </div>
</dx-popup>
import { DxPopupModule } from "devextreme-angular";
// ...
export class AppComponent {
    employee = {
        FirstName: "Sandra",
        LastName: "Johnson",
        BirthDate: "1974/11/15",
        Address: "4600 N Virginia Rd."
    };
}
@NgModule({
    imports: [
        // ...
        DxPopupModule
    ],
    // ...
})

An item object extends the standard binding context. Use the input variable that is declared via the let keyword. In all Angular apps, you can also bind a template element to the rendered item's index using the index keyword.

Angular
HTML
TypeScript
<dx-list [dataSource]="fruits">
    <div *dxTemplate="let fruit of 'item'; let i = index">
        <span>[{{i}}] </span>
        <b>{{fruit.name}}</b><br />
        <p>{{fruit.count}}</p>
    </div>
</dx-list>
import { DxListModule } from "devextreme-angular";
// ...
export class AppComponent {
    fruits = [
        { name: "Apples", count: 10 },
        { name: "Oranges", count: 12 },
        { name: "Lemons", count: 15 },
        { name: "Pears", count: 20 },
        { name: "Pineapples", count: 3 }
    ];
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})
See Also