Move update templates from AfterContentChecked to VIewChecked (#1354) (#1358)

* Move update templates from AfterContentChecked to VIewChecked

* Add test

* fix lint issues

* rename test component selector

Author: ivanblinov2k17

packages/devextreme-angular/src/core/component.ts

@@ -12,7 +12,8 @@ import {
     OnInit,
     DoCheck,
     AfterContentChecked,
-    AfterViewInit
+    AfterViewInit,
+    AfterViewChecked
 } from '@angular/core';
 
 import { isPlatformServer } from '@angular/common';
@@ -44,7 +45,7 @@ export const getServerStateKey = () => {
 @Component({
     template: ''
 })
-export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterContentChecked, AfterViewInit,
+export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterContentChecked, AfterViewInit, AfterViewChecked,
     INestedOptionContainer, ICollectionNestedOptionContainer, IDxTemplateHost {
     private _initialOptions: any = {};
     protected _optionsToUpdate: any = {};
@@ -219,7 +220,6 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
     }
 
     ngAfterContentChecked() {
-        this._updateTemplates();
         this.applyOptions();
         this.resetOptions();
         this.unlockWidgetUpdate();
@@ -231,6 +231,10 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
         this.recreatedNestedComponents = [];
     }
 
+    ngAfterViewChecked(): void {
+        this._updateTemplates();
+    }
+
     applyOptions() {
         if (Object.keys(this._optionsToUpdate).length) {
             if (this.instance) {

packages/devextreme-angular/tests/src/core/template.spec.ts

@@ -137,6 +137,19 @@ export class TestContainerComponent {
     }
 }
 
+@Component({
+    selector: 'dx-imitation',
+    template: `
+        <div *dxTemplate="let d of 'ImportedTemlate'">
+            <div>123213</div>
+        </div>
+    `
+})
+export class ImitateImportComponent {
+    constructor() {
+    }
+}
+
 
 describe('DevExtreme Angular widget\'s template', () => {
 
@@ -169,6 +182,38 @@ describe('DevExtreme Angular widget\'s template', () => {
 
     });
 
+    it('should be able to load template imported from another component', () => {
+        TestBed.configureTestingModule(
+            {
+                declarations: [TestContainerComponent, DxTestWidgetComponent, DxTestComponent, ImitateImportComponent],
+                imports: [DxTemplateModule, BrowserTransferStateModule]
+            });
+        TestBed.overrideComponent(TestContainerComponent, {
+            set: {
+                template: `
+                    <dx-test-widget testTemplate="ImportedTemlate">
+                        <dx-imitation></dx-imitation>
+                    </dx-test-widget>
+                `
+            }
+        });
+        let fixture = TestBed.createComponent(TestContainerComponent);
+        fixture.detectChanges();
+
+        let testComponent = fixture.componentInstance,
+        innerComponent = testComponent.widget,
+        templatesHash = innerComponent.instance.option('integrationOptions.templates'),
+        template = innerComponent.testTemplate,
+        container = document.createElement('div');
+
+        expect(template).not.toBeUndefined;
+
+        templatesHash[template].render({ container: container });
+        fixture.detectChanges();
+
+        expect(container.children[0].classList.contains('dx-template-wrapper')).toBe(true);
+    });
+
 
     it('should add template wrapper class as template has root container', () => {
         TestBed.overrideComponent(TestContainerComponent, {