Merge pull request #5638 from IgniteUI/rkolev/fix-5232-7.3.x

Fixing grid toolbar buttons type - 7.3.x

Author: DiyanDimitrov

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

@@ -21,6 +21,7 @@ import {
     AbsoluteScrollStrategy
 } from '../services/index';
 import { GridBaseAPIService } from './api.service';
+import { IgxButtonDirective } from '../directives/button/button.directive';
 import { IgxGridBaseComponent, IGridDataBindable } from './grid-base.component';
 import { IgxDropDownComponent } from '../drop-down/drop-down.component';
 import { IgxColumnHidingComponent } from './column-hiding.component';
@@ -104,8 +105,8 @@ export class IgxGridToolbarComponent extends DisplayDensityBase {
      * const hidingButton = this.grid.toolbar.columnHidingButton;
      * ```
      */
-    @ViewChild('columnHidingButton')
-    public columnHidingButton;
+    @ViewChild('columnHidingButton', { read: IgxButtonDirective })
+    public columnHidingButton: IgxButtonDirective;
 
     /**
      * Provides a reference to the `IgxDropDownComponent` of the Export button.
@@ -122,8 +123,8 @@ export class IgxGridToolbarComponent extends DisplayDensityBase {
      * const exportBtn = this.grid.toolbar.exportButton;
      * ```
      */
-    @ViewChild('btnExport')
-    public exportButton;
+    @ViewChild('btnExport', { read: IgxButtonDirective })
+    public exportButton: IgxButtonDirective;
 
     /**
      * Provides a reference to the `IgxDropDownComponent` of the Column Pinning UI.
@@ -149,8 +150,8 @@ export class IgxGridToolbarComponent extends DisplayDensityBase {
      * const pinningButton = this.grid.toolbar.columnPinningButton;
      * ```
      */
-    @ViewChild('columnPinningButton')
-    public columnPinningButton;
+    @ViewChild('columnPinningButton', { read: IgxButtonDirective })
+    public columnPinningButton: IgxButtonDirective;
 
     /**
      * Returns a reference to the `IgxGridComponent` component, hosting the `IgxGridToolbarComponent`.

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

@@ -4,6 +4,7 @@ import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { first } from 'rxjs/operators';
 import { IgxCsvExporterOptions, IgxCsvExporterService, IgxExcelExporterOptions, IgxExcelExporterService } from '../../services/index';
+import { IgxButtonDirective } from '../../directives/button/button.directive';
 import { IgxGridComponent } from './grid.component';
 import { IgxGridModule } from './index';
 import { DisplayDensity } from '../../core/displayDensity';
@@ -578,6 +579,28 @@ describe('IgxGrid - Grid Toolbar Custom Content', () => {
         expect(customContainer).not.toBe(null);
     });
 
+    it('should expose the toolbar buttons with their correct type', () => {
+        fixture = TestBed.createComponent(GridToolbarTestPage1Component);
+        fixture.detectChanges();
+        grid = fixture.componentInstance.grid1;
+
+        grid.showToolbar = true;
+        grid.columnHiding = true;
+        grid.columnPinning = true;
+        grid.exportExcel = true;
+        grid.exportCsv = true;
+        fixture.detectChanges();
+
+        let aButton = grid.toolbar.columnHidingButton;
+        expect(aButton instanceof IgxButtonDirective).toBe(true, 'column hiding button has wrong type');
+
+        aButton = grid.toolbar.columnPinningButton;
+        expect(aButton instanceof IgxButtonDirective).toBe(true, 'column pinning button has wrong type');
+
+        aButton = grid.toolbar.exportButton;
+        expect(aButton instanceof IgxButtonDirective).toBe(true, 'export button has wrong type');
+    });
+
 });
 
 function getToolbar(fixture) {