Angular Common - Object Structures - template

A template notation used to specify templates for widget elements.

To use a template, pass a value with one of the following types to a widget's ...Template option:

  • String
    Specifies the name of the template to use if the template is defined within a widget using the dxTemplate markup component.

    Angular
    HTML
    TypeScript
    <dx-list ...
        itemTemplate="listItem">
        <div *dxTemplate="let itemData of 'listItem'; let itemIndex = index">
            {{itemIndex}} - {{itemData.itemProperty}}
        </div>
    </dx-list>
    import { DxListModule } from 'devextreme-angular';
    // ...
    export class AppComponent {
        // ...
    }
    @NgModule({
        imports: [
            // ...
            DxListModule
        ],
        // ...
    })
    AngularJS
    HTML
    JavaScript
    <div ng-controller="DemoController">
        <div dx-list="{
            ...
            itemTemplate: 'listItem'
        }" dx-item-alias="itemData">
            <div data-options="dxTemplate: { name: 'listItem' }">
                {{$index}} - {{itemData.itemProperty}}
            </div>
        </div>
    </div>
    angular.module('DemoApp', ['dx'])
        .controller('DemoController', function ($scope) {
            // ...
        });
    Knockout
    HTML
    JavaScript
    <div data-bind="dxList: {
        ...
        itemTemplate: 'listItem'
    }">
        <div data-options="dxTemplate: { name: 'listItem' }">
            <span data-bind="text: $index"></span> - <span data-bind="text: itemProperty"></span>
        </div>
    </div>
    var viewModel = {
        // ...
    };
    
    ko.applyBindings(viewModel);
  • DOM Node or jQuery
    Specifies the page element containing the template. Useful for referring to external templates when using a 3rd-party template engine.

    JavaScript
    HTML
    DevExpress.ui.setTemplateEngine("underscore");
    
    $(function() {
        $("#list").dxList({
            // ...
            itemTemplate: $("#itemTemplate")
        });
    })
    <div id="list"></div>
    <script type="text/html" id="itemTemplate">
        <!-- your Underscore template -->
    </script>
  • Function
    Combines the HTML markup using jQuery DOM manipulation methods:

    JavaScript
    $(function() {
        $("#listContainer").dxList({
            // ...
            itemTemplate: function (itemData, itemIndex, element) {
                element.append(
                    $("<span>").text(itemIndex) - $("<span>").text(itemData.itemProperty)
                )
            }
        });
    });
See Also