fix(grid-toolbar): adding fix for toolbar button type #5232

Author: rmkrmk

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', { static: false })
-    public columnHidingButton;
+    @ViewChild('columnHidingButton', { read: IgxButtonDirective, static: false })
+    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', { static: false })
-    public exportButton;
+    @ViewChild('btnExport', { read: IgxButtonDirective, static: false })
+    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', { static: false })
-    public columnPinningButton;
+    @ViewChild('columnPinningButton', { read: IgxButtonDirective, static: false })
+    public columnPinningButton: IgxButtonDirective;
 
     /**
      * Returns a reference to the `IgxGridComponent` component, hosting the `IgxGridToolbarComponent`.