Angular Common - Object Structures - template

A template notation used to specify templates for widget elements.

Templates are passed as options that end with ...Template (in jQuery, Angular, and Vue) or ...Render/...Component (in React).

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. Available only in collection widget templates.

  • element
    A jQuery element that represents the widget element being customized. Available only if you use jQuery.

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

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 widgets also support templates for individual items. Do not specify the widget's dataSource option if you use individual templates.

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 { }
See Also