DevExtreme Angular - Templates

Templates allow you to customize DevExtreme UI components. This article gives an overview of the capabilities that DevExtreme provides for implementing and applying templates.

NOTE
For documentation on templates in DevExtreme ASP.NET MVC Controls, refer to Implementing Templates (for ASP.NET MVC 5) or Templates (for ASP.NET Core).

Default Templates

Default templates are based on data source fields. You can control appearance by adding or removing particular fields from data source objects. For example, the List UI component's default template for items contains the text, visible, and disabled fields, among others. If you assign the following array to the UI component's items or dataSource property, the first item will be disabled, the second hidden, both of them will have text, and the third item will render a custom markup:

JavaScript
  • function customMarkup() {
  • var d = document.createElement("div");
  • d.innerHTML = "<i>Oranges</i>";
  • return d;
  • }
  • var fruits = [
  • { text: "Apples", disabled: true },
  • { text: "Lemons", visible: false },
  • { template: customMarkup }
  • ];

You can achieve the same in the markup using the dxItem component that supports default and custom templates. Do not set the UI component's dataSource property in this case.

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>
  • <i>Oranges</i>
  • </dxi-item>
  • </dx-list>
  • import { DxListModule } from "devextreme-angular";
  • // ...
  • @NgModule({
  • imports: [
  • // ...
  • DxListModule
  • ],
  • // ...
  • })
  • export class AppModule { }

Default templates and the fields available in them depend on the UI component. Refer to the items property description of a particular UI component for a list of template fields.

Custom Templates

Templates are passed as properties that end with ...Template. Each template has access to the following parameters:

  • data
    A data source object or an object with fields specific to a particular template. For information on the contents of data, refer to the Template Data section of the template's API reference article.

  • index
    A zero-based index of the item in the collection. Can be available only in collection UI component templates.

The following code shows how to declare a template and use these parameters. This code declares an itemTemplate for the List UI component:

app.component.html
app.component.ts
app.module.ts
  • <dx-list
  • [items]="listData"
  • itemTemplate="list-item">
  • <div *dxTemplate="let data of 'list-item'; let index = index">
  • {{index}} - {{data.itemProperty}}
  • </div>
  • </dx-list>
  • import { Component } from '@angular/core';
  •  
  • @Component({
  • selector: 'app-root',
  • templateUrl: './app.component.html',
  • styleUrls: ['./app.component.css']
  • })
  • export class AppComponent {
  • listData = [
  • { itemProperty: "someValue" },
  • // ...
  • ]
  • }
  • import { BrowserModule } from '@angular/platform-browser';
  • import { NgModule } from '@angular/core';
  • import { AppComponent } from './app.component';
  •  
  • import { DxListModule } from 'devextreme-angular';
  •  
  • @NgModule({
  • declarations: [
  • AppComponent
  • ],
  • imports: [
  • BrowserModule,
  • DxListModule
  • ],
  • providers: [ ],
  • bootstrap: [AppComponent]
  • })
  • export class AppModule { }

Collection UI components are components that include the items property. These components also support templates for individual items. Do not specify the UI component's dataSource property if you use individual templates.

Declare named templates within the component's markup but outside the templated element. Non-named templates should be declared inside the templated element.

app.component.html
app.module.ts
  • <dx-list>
  • <dxi-item>
  • <i>Item 1</i>
  • </dxi-item>
  • <dxi-item>
  • <b>Item 2</b>
  • </dxi-item>
  • <dxi-item>
  • <div *dxTemplate>
  • Item with a nested component
  • <dx-button text="Click me"></dx-button>
  • </div>
  • </dxi-item>
  • </dx-list>
  • import { BrowserModule } from '@angular/platform-browser';
  • import { NgModule } from '@angular/core';
  • import { AppComponent } from './app.component';
  •  
  • import { DxListModule, DxButtonModule } from 'devextreme-angular';
  •  
  • @NgModule({
  • declarations: [
  • AppComponent
  • ],
  • imports: [
  • BrowserModule,
  • DxListModule,
  • DxButtonModule
  • ],
  • providers: [ ],
  • bootstrap: [AppComponent]
  • })
  • export class AppModule { }