Angular Common - Object Structures - template
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 ofdata
, 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:
- <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.
- <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
If you have technical questions, please create a support ticket in the DevExpress Support Center.