Support dxi components without specified templates

Author: kvet

src/core/nested-option.ts

@@ -15,7 +15,7 @@ export abstract class BaseNestedOption implements INestedOptionContainer, IColle
     protected abstract get _optionPath(): string;
     protected abstract _fullOptionPath(): string;
 
-    constructor(private _element: ElementRef) {
+    constructor() {
         this._collectionContainerImpl = new CollectionNestedOptionContainerImpl(this._setOption.bind(this), this._filterItems.bind(this));
     }
 
@@ -40,11 +40,6 @@ export abstract class BaseNestedOption implements INestedOptionContainer, IColle
         this._hostOptionPath = optionPath;
     }
 
-    _template(...args) {
-        let container = args[2] || args[1] || args[0];
-        return container.append(this._element.nativeElement);
-    }
-
     setChildren<T extends ICollectionNestedOption>(propertyName: string, items: QueryList<T>) {
         return this._collectionContainerImpl.setChildren(propertyName, items);
     }
@@ -121,6 +116,34 @@ export abstract class CollectionNestedOption extends BaseNestedOption implements
     }
 }
 
+export interface OptionWithTemplate extends BaseNestedOption {
+    template: any;
+}
+export function extractTemplate(option: OptionWithTemplate, element: ElementRef) {
+    if (!option.template === undefined || !element.nativeElement.hasChildNodes()) {
+        return;
+    }
+
+    let childNodes = [].slice.call(element.nativeElement.childNodes);
+    let userContent = childNodes.filter((n) => {
+        if (n.tagName) {
+            let tagNamePrefix = n.tagName.toLowerCase().substr(0, 3);
+            return !(tagNamePrefix === 'dxi' || tagNamePrefix === 'dxo');
+        } else {
+            return n.textContent.replace(/\s/g, '').length;
+        }
+    });
+    if (!userContent.length) {
+        return;
+    }
+
+    option.template = {
+        render: (options) => {
+            return options.container.append(element.nativeElement);
+        }
+    };
+}
+
 export class NestedOptionHost {
     private _host: INestedOptionContainer;
     private _optionPath: OptionPathGetter;

templates/nested-component.tst

@@ -3,16 +3,17 @@
 import {
     Component,
     NgModule,
-    Host,
+    Host,<#? it.hasTemplate #>
     ElementRef,
+    AfterViewInit,<#?#>
     SkipSelf<#? it.properties #>,
     Input<#?#><#? it.collectionNestedComponents.length #>,
     ContentChildren,
     forwardRef,
     QueryList<#?#>
 } from '@angular/core';
 
-import { NestedOptionHost } from '../../core/nested-option';
+import { NestedOptionHost<#? it.hasTemplate #>, extractTemplate<#?#> } from '../../core/nested-option';
 import { <#= it.baseClass #> } from '<#= it.basePath #>';
 <#~ it.collectionNestedComponents :component:i #><#? component.className !== it.className #>import { <#= component.className #>Component } from './<#= component.path #>';
 <#?#><#~#>
@@ -25,7 +26,7 @@ import { <#= it.baseClass #> } from '<#= it.basePath #>';
         '<#= input.name #>'<#? i < it.inputs.length-1 #>,<#?#><#~#>
     ]<#?#>
 })
-export class <#= it.className #>Component extends <#= it.baseClass #> {<#~ it.properties :prop:i #>
+export class <#= it.className #>Component extends <#= it.baseClass #><#? it.hasTemplate #> implements AfterViewInit<#?#> {<#~ it.properties :prop:i #>
     @Input()
     get <#= prop.name #>() {
         return this._getOption('<#= prop.name #>');
@@ -48,14 +49,16 @@ export class <#= it.className #>Component extends <#= it.baseClass #> {<#~ it.pr
     }
 <#~#>
 
-    constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, @Host() optionHost: NestedOptionHost, element: ElementRef) {
-        super(element);
-<#? it.hasTemplate #>
-        this.template = this._template.bind(this);
-<#?#>
+    constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, @Host() optionHost: NestedOptionHost<#? it.hasTemplate #>, private element: ElementRef<#?#>) {
+        super();
         parentOptionHost.setNestedOption(this);
         optionHost.setHost(this, this._fullOptionPath.bind(this));
     }
+<#? it.hasTemplate #>
+    ngAfterViewInit() {
+        extractTemplate(this, this.element);
+    }
+<#?#>
 }
 
 @NgModule({

tests/src/core/nested-option.spec.ts

@@ -60,8 +60,8 @@ export class DxoTestOptionComponent extends NestedOption {
         return 'testOption';
     }
 
-    constructor(@SkipSelf() @Host() private _pnoh: NestedOptionHost, @Host() private _noh: NestedOptionHost, element: ElementRef) {
-        super(element);
+    constructor(@SkipSelf() @Host() private _pnoh: NestedOptionHost, @Host() private _noh: NestedOptionHost) {
+        super();
 
         this._pnoh.setNestedOption(this);
         this._noh.setHost(this);
@@ -86,8 +86,8 @@ export class DxiTestCollectionOptionComponent extends CollectionNestedOption {
         return 'testCollectionOption';
     }
 
-    constructor(@SkipSelf() @Host() private _pnoh: NestedOptionHost, @Host() private _noh: NestedOptionHost, element: ElementRef) {
-        super(element);
+    constructor(@SkipSelf() @Host() private _pnoh: NestedOptionHost, @Host() private _noh: NestedOptionHost) {
+        super();
 
         this._pnoh.setNestedOption(this);
         this._noh.setHost(this, this._fullOptionPath.bind(this));

tests/src/ui/form.spec.ts

@@ -50,8 +50,7 @@ describe('DxForm', () => {
             set: {
                 template: `
                     <dx-form id="form" [formData]="formData">
-                        <dxi-item dataField="name" editorType="dxTextBox" [template]="null">
-                        </dxi-item>
+                        <dxi-item dataField="name" editorType="dxTextBox"></dxi-item>
                     </dx-form>
                 `
             }
@@ -68,12 +67,10 @@ describe('DxForm', () => {
             set: {
                 template: `
                     <dx-form id="form" [formData]="formData">
-                        <dxi-item caption="Root Group" itemType="group" [template]="null">
-                            <dxi-item dataField="name" editorType="dxTextBox" [template]="null">
-                            </dxi-item>
-                            <dxi-item caption="Inner Group" itemType="group" [template]="null">
-                                <dxi-item dataField="name" editorType="dxTextBox" [template]="null">
-                                </dxi-item>
+                        <dxi-item caption="Root Group" itemType="group">
+                            <dxi-item dataField="name" editorType="dxTextBox"></dxi-item>
+                            <dxi-item caption="Inner Group" itemType="group">
+                                <dxi-item dataField="name" editorType="dxTextBox"></dxi-item>
                             </dxi-item>
                         </dxi-item>
                     </dx-form>

tests/src/ui/list.spec.ts

@@ -325,6 +325,23 @@ describe('DxList', () => {
         expect(instance.element().find('.dx-item-content').eq(0).text()).toBe('testTemplate');
     }));
 
+    it('should be able to define item without template', async(() => {
+        TestBed.overrideComponent(TestContainerComponent, {
+            set: {
+                template: `
+                    <dx-list>
+                        <dxi-item text="TestText"></dxi-item>
+                    </dx-list>
+                `
+            }
+        });
+        let fixture = TestBed.createComponent(TestContainerComponent);
+        fixture.detectChanges();
+
+        let instance = getWidget(fixture);
+        expect(instance.element().find('.dx-item-content').eq(0).text()).toBe('TestText');
+    }));
+
 
     it('should destroy all components inside template', () => {
         let destroyed = false;