Merge pull request #523 from DevExpress/template_item_index

Add item index to dxTemplate for collection widgets

Author: anna-zhernovkova

src/core/template.ts

@@ -18,7 +18,7 @@ export const DX_TEMPLATE_WRAPPER_CLASS = 'dx-template-wrapper';
 
 export class RenderData {
     model: any;
-    itemIndex: number;
+    index: number;
     container: any;
 }
 
@@ -40,7 +40,10 @@ export class DxTemplateDirective {
     }
 
     render(renderData: RenderData) {
-        let childView = this.viewContainerRef.createEmbeddedView(this.templateRef, { '$implicit': renderData.model });
+        let childView = this.viewContainerRef.createEmbeddedView(this.templateRef, {
+            '$implicit': renderData.model,
+            index: renderData.index
+        });
         if (renderData.container) {
             renderData.container.append(childView.rootNodes);
         }

tests/src/core/template.spec.ts

@@ -23,6 +23,7 @@ import {
     DxComponent,
     DxTemplateHost,
     DxTemplateModule,
+    DxTemplateDirective,
     WatcherHelper
 } from '../../../dist';
 
@@ -69,9 +70,33 @@ export class DxTestWidgetComponent extends DxComponent implements AfterViewInit
     }
 }
 
+@Component({
+    selector: 'dx-test',
+    template: '',
+    providers: [DxTemplateHost, WatcherHelper]
+})
+export class DxTestComponent extends DxComponent implements AfterViewInit {
+    templates: DxTemplateDirective[];
+
+    constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, _watcherHelper: WatcherHelper) {
+        super(elementRef, ngZone, templateHost, _watcherHelper);
+    }
+
+    protected _createInstance() {}
+
+    ngAfterViewInit() {
+        this.templates[0].render({
+            model: {},
+            container: $(this.element.nativeElement),
+            index: 5
+        });
+    }
+}
+
 @Component({
     selector: 'test-container-component',
-    template: ''
+    template: '',
+    providers: [DxTemplateHost]
 })
 export class TestContainerComponent {
     @ViewChildren(DxTestWidgetComponent) innerWidgets: QueryList<DxTestWidgetComponent>;
@@ -83,7 +108,7 @@ describe('DevExtreme Angular widget\'s template', () => {
     beforeEach(() => {
         TestBed.configureTestingModule(
             {
-                declarations: [TestContainerComponent, DxTestWidgetComponent],
+                declarations: [TestContainerComponent, DxTestWidgetComponent, DxTestComponent],
                 imports: [DxTemplateModule]
             });
     });
@@ -141,5 +166,22 @@ describe('DevExtreme Angular widget\'s template', () => {
 
     }));
 
+
+    it('should have item index', async(() => {
+        TestBed.overrideComponent(TestContainerComponent, {
+            set: {
+                template: `
+            <dx-test> 
+                <div *dxTemplate="let d of 'templateName'; let i = index">index: {{i}}</div>
+            </dx-test>
+           `}
+        });
+        let fixture = TestBed.createComponent(TestContainerComponent);
+        fixture.detectChanges();
+
+        let element = fixture.nativeElement.querySelector('div');
+        expect(element.textContent).toBe('index: 5');
+    }));
+
 });