Angular Markup Components Item

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.

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 { }
NOTE
dxItem elements are ignored when the dataSource property is defined.