Merge pull request #6976 from IgniteUI/mdragnev/fix-6931-9.0.x

fix(*): Apply custom css classes to igxGrid and igxToolbar components

Author: ChronosSF

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -590,6 +590,13 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         this.notifyChanges();
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    @Input()
+    public class = '';
+
     /**
      * Gets/Sets the height.
      * @example
@@ -619,6 +626,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     get hostWidth() {
         return this._width || this._hostWidth;
     }
+
     /**
      * Gets/Sets the width of the grid.
      * @example
@@ -1856,7 +1864,10 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     @HostBinding('attr.class')
     get hostClass(): string {
-        return this.getComponentDensityClass('igx-grid');
+        const classes = [this.getComponentDensityClass('igx-grid')];
+        // The custom classes should be at the end.
+        classes.push(this.class);
+        return classes.join(' ');
     }
 
     get bannerClass(): string {

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

@@ -68,6 +68,13 @@ export class IgxGridToolbarComponent extends DisplayDensityBase {
 
     private _filterColumnsPrompt = 'Filter columns list ...';
 
+    /**
+     * @hidden
+     * @internal
+     */
+    @Input()
+    public class = '';
+
     /**
      * Gets the height for the `IgxGridToolbarComponent`'s drop down panels.
      * ```typescript
@@ -211,6 +218,10 @@ export class IgxGridToolbarComponent extends DisplayDensityBase {
 
     @HostBinding('attr.class')
     get hostClass(): string {
+        const classes = [this.getComponentDensityClass('igx-grid-toolbar')];
+        // The custom classes should be at the end.
+        classes.push(this.class);
+        return classes.join(' ');
         return this.getComponentDensityClass('igx-grid-toolbar');
     }