feat(igxGrid): Allow setting external template ref via Input for the master-details template.

Author: MKirova

projects/igniteui-angular/src/lib/grids/grid/grid.component.html

@@ -124,7 +124,7 @@
                                 <div class="igx-grid__row-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}"></div>
                         </ng-container>
                         <ng-template
-                    [ngTemplateOutlet]='detailTemplate.first'
+                    [ngTemplateOutlet]='detailTemplate'
                     [ngTemplateOutletContext]='getDetailsContext(rowData, rowIndex)'>
                     </ng-template>
                 </div>

projects/igniteui-angular/src/lib/grids/grid/grid.component.ts

@@ -154,8 +154,43 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
     /**
      * @hidden @internal
      */
-    @ContentChildren(IgxGridDetailTemplateDirective, { read: TemplateRef })
-    public detailTemplate: QueryList<TemplateRef<any>> = new QueryList();
+    @ContentChild(IgxGridDetailTemplateDirective, { read: TemplateRef })
+    public detailTemplateDirective: TemplateRef<any>;
+
+
+    /**
+     * Returns a reference to the master-detail template.
+     * ```typescript
+     * let detailTemplate = this.grid.detailTemplate;
+     * ```
+     *
+     * @memberof IgxColumnComponent
+     */
+    @Input('detailTemplate')
+    public get detailTemplate(): TemplateRef<any> {
+        return this._detailTemplate;
+    }
+    /**
+     * Sets the master-detail template.
+     * ```html
+     * <ng-template #detailTemplate igxGridDetail let-dataItem>
+     *    <div>
+     *       <div><span class='categoryStyle'>City:</span> {{dataItem.City}}</div>
+     *       <div><span class='categoryStyle'>Address:</span> {{dataItem.Address}}</div>
+     *    </div>
+     * </ng-template>
+     * ```
+     * ```typescript
+     * @ViewChild("'detailTemplate'", {read: TemplateRef })
+     * public detailTemplate: TemplateRef<any>;
+     * this.grid.detailTemplate = this.detailTemplate;
+     * ```
+     *
+     * @memberof IgxColumnComponent
+     */
+    public set detailTemplate(template: TemplateRef<any>) {
+        this._detailTemplate = template;
+    }
 
     /**
      * @hidden @internal
@@ -268,6 +303,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
     private _hideGroupedColumns = false;
     private _dropAreaMessage = null;
     private _showGroupArea = true;
+    private _detailTemplate;
 
     /**
      * Gets/Sets the array of data that populates the `IgxGridComponent`.
@@ -562,7 +598,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
      * @hidden @internal
      */
     public get hasDetails() {
-        return !!this.detailTemplate.length;
+        return !!this.detailTemplate;
     }
 
     /**
@@ -921,6 +957,10 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
             this._groupRowTemplate = this.groupTemplate.template;
         }
 
+        if (this.detailTemplateDirective) {
+            this._detailTemplate = this.detailTemplateDirective;
+        }
+
 
         if (this.hideGroupedColumns && this._columns && this.groupingExpressions) {
             this._setGroupColsVisibility(this.hideGroupedColumns);

src/app/grid-master-detail/grid-master-detail.sample.html

@@ -24,17 +24,17 @@
         <igx-column-layout field='group1'>
             <igx-column  [rowStart]="1" [colStart]="1" [rowEnd]="4" field="ID"></igx-column>
         </igx-column-layout> -->
-        <ng-template igxGridDetail let-dataItem>
-            <div>
-                <div *ngIf='true'>Test</div>
-                <div *ngIf="dataItem.Country"><span class='categoryStyle'>Country:</span> {{dataItem.Country}}</div>
-                <div><span class='categoryStyle'>City:</span> {{dataItem.City}}</div>
-                <div><span class='categoryStyle'>Address:</span> {{dataItem.Address}}</div>
-            </div>
-        </ng-template>
+
     </igx-grid>
     <br />
-
+    <ng-template igxGridDetail let-dataItem #detailTemplate>
+        <div>
+            <div *ngIf='true'>Test</div>
+            <div *ngIf="dataItem.Country"><span class='categoryStyle'>Country:</span> {{dataItem.Country}}</div>
+            <div><span class='categoryStyle'>City:</span> {{dataItem.City}}</div>
+            <div><span class='categoryStyle'>Address:</span> {{dataItem.Address}}</div>
+        </div>
+    </ng-template>
     <button igxButton="raised" (click)="grid1.expandAll()">Expand All</button>
     <button igxButton="raised" (click)="grid1.collapseAll()">Collapse All</button>
     <button igxButton="raised" (click)="expandFirstRow()">Expand first</button>

src/app/grid-master-detail/grid-master-detail.sample.ts

@@ -1,5 +1,5 @@
 /* eslint-disable max-len */
-import { Component, ViewChild, OnInit, Inject } from '@angular/core';
+import { Component, ViewChild, OnInit, Inject, TemplateRef } from '@angular/core';
 
 import { IgxGridComponent, IgxGridStateDirective } from 'igniteui-angular';
 import { DisplayDensity, IDisplayDensityOptions, DisplayDensityToken } from 'projects/igniteui-angular/src/lib/core/density';
@@ -15,6 +15,9 @@ export class GridMasterDetailSampleComponent implements OnInit {
     public data: Array<any>;
     public expState = [];
     public columns: Array<any>;
+    @ViewChild('detailTemplate', {read: TemplateRef, static: true })
+    public detailTemplate: TemplateRef<any>;
+
     constructor(@Inject(DisplayDensityToken) public displayDensityOptions: IDisplayDensityOptions) {}
     public ngOnInit(): void {
         this.columns = [
@@ -51,6 +54,8 @@ export class GridMasterDetailSampleComponent implements OnInit {
             { Salary: '6600',ID: 'FRANR', CompanyName: 'France restauration', ContactName: 'Carine Schmitt', ContactTitle: 'Marketing Manager', Address: '54, rue Royale', City: 'Nantes', Region: null, PostalCode: '44000', Country: 'France', Phone: '40.32.21.21', Fax: '40.32.21.20' },
             { Salary: '4900',ID: 'FRANS', CompanyName: 'Franchi S.p.A.', ContactName: 'Paolo Accorti', ContactTitle: 'Sales Representative', Address: 'Via Monte Bianco 34', City: 'Torino', Region: null, PostalCode: '10100', Country: 'Italy', Phone: '011-4988260', Fax: '011-4988261' }
         ];
+
+        this.grid1.detailTemplate = this.detailTemplate;
     }
 
     public expandFirstRow() {