Merge pull request #12185 from IgniteUI/mkirova/expose-detailTemplate-Input

Expose master detail template input

Author: dkamburov

CHANGELOG.md

@@ -1,6 +1,14 @@
 # Ignite UI for Angular Change Log
 
 All notable changes for each version of this project will be documented in this file.
+
+
+## 15.0.0
+
+### New Features
+- `igxGrid` - exposing new Input properties:
+    - `detailTemplate` - Gets/Sets the master-detail template.
+
 ## 14.2.0
 
 ### New Features

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<IgxGridMasterDetailContext>> = new QueryList();
+    @ContentChild(IgxGridDetailTemplateDirective, { read: TemplateRef })
+    public detailTemplateDirective: TemplateRef<IgxGridMasterDetailContext>;
+
+
+    /**
+     * Returns a reference to the master-detail template.
+     * ```typescript
+     * let detailTemplate = this.grid.detailTemplate;
+     * ```
+     *
+     * @memberof IgxColumnComponent
+     */
+    @Input('detailTemplate')
+    public get detailTemplate(): TemplateRef<IgxGridMasterDetailContext> {
+        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<IgxGridMasterDetailContext>) {
+        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);

projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts

@@ -1,4 +1,4 @@
-import { Component, ViewChild, OnInit, DebugElement, QueryList } from '@angular/core';
+import { Component, ViewChild, OnInit, DebugElement, QueryList, TemplateRef } from '@angular/core';
 import { TestBed, ComponentFixture, fakeAsync, tick } from '@angular/core/testing';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -346,6 +346,17 @@ describe('IgxGrid Master Detail #grid', () => {
                 expect(row.expanded).toBeFalsy();
             });
         });
+
+        it('should allow setting external details template via Input.', () => {
+            grid = fix.componentInstance.grid;
+            grid.detailTemplate = fix.componentInstance.detailTemplate;
+            fix.detectChanges();
+            grid.toggleRow(fix.componentInstance.data[0].ID);
+            fix.detectChanges();
+            const gridRows = grid.rowList.toArray();
+            const firstDetail = GridFunctions.getMasterRowDetail(gridRows[0]);
+            expect(firstDetail.textContent.trim()).toBe('NEW TEMPLATE');
+        });
     });
 
     describe('Keyboard Navigation ', () => {
@@ -1257,12 +1268,20 @@ describe('IgxGrid Master Detail #grid', () => {
                 </div>
             </ng-template>
         </igx-grid>
+        <ng-template igxGridDetail let-dataItem #detailTemplate>
+                <div>
+                    NEW TEMPLATE
+                </div>
+    </ng-template>
     `
 })
 export class DefaultGridMasterDetailComponent {
     @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
     public grid: IgxGridComponent;
 
+    @ViewChild('detailTemplate', { read: TemplateRef, static: true })
+    public detailTemplate: TemplateRef<any>;
+
     public width = '800px';
     public height = '500px';
     public data = SampleTestData.contactInfoDataFull();

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() {