fix(hierarchical grid): a few new columns dark theme

Author: multignite

src/app/grid/grid-sample-pinning/grid-toolbar-pinning.component.html

@@ -1,4 +1,4 @@
-<div [ngClass]="{'grid__wrapper': true, 'dark-theme': dark }" style='width: 100%;'>
+<div [ngClass]="{'grid__wrapper': true, 'dark-theme': useDarkTheme }" style='width: 100%;'>
     <igx-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data" [width]="'100%'" [height]="'480px'">
         <igx-grid-toolbar>
             <igx-grid-toolbar-actions>

src/app/grid/grid-sample-pinning/grid-toolbar-pinning.component.ts

@@ -15,7 +15,7 @@ import { ActivatedRoute } from '@angular/router';
 export class PinningToolbarSampleComponent implements OnInit{
     @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent;
 
-    public dark: boolean = false;
+    public useDarkTheme: boolean = false;
     public data: any[];
     public columns: any[];
 
@@ -36,7 +36,7 @@ export class PinningToolbarSampleComponent implements OnInit{
         this.data = DATA;
 
         this.activatedRoute.queryParams.subscribe(params => {
-            this.dark = params.dark === 'true' ? true : false
+            this.useDarkTheme = params.dark === 'true';
         });
     }
 

src/app/hierarchical-grid/hierarchical-grid-column-pinning/hierarchical-grid-toolbar-pinning.component.html

@@ -1,4 +1,4 @@
-<div [ngClass]="{'grid__wrapper': true, 'dark-theme': dark }">
+<div [ngClass]="{'grid__wrapper': true, 'dark-theme': useDarkTheme }">
 <igx-hierarchical-grid [igxPreventDocumentScroll]="true"  class="hierarchicalGrid" [data]="localdata" [autoGenerate]="false"
     [height]="'100%'" [width]="'100%'" #hierarchicalGrid>
         <igx-grid-toolbar>

src/app/hierarchical-grid/hierarchical-grid-column-pinning/hierarchical-grid-toolbar-pinning.component.ts

@@ -9,16 +9,15 @@ import { ActivatedRoute } from '@angular/router';
 })
 export class HGridToolbarPinningComponent implements OnInit {
     public localdata;
-    public dark: boolean = false;
+    public useDarkTheme: boolean = false;
 
     constructor(private activatedRoute: ActivatedRoute) {
         this.localdata = CUSTOMERS;
     }
 
     public ngOnInit(): void {
         this.activatedRoute.queryParams.subscribe(params => {
-            console.log(this.activatedRoute.queryParams);
-            this.dark = params.dark === 'true' ? true : false;
+            this.useDarkTheme = params.dark === 'true';
         });
     }
 

src/app/tree-grid/tree-grid-column-pinning-sample/tree-grid-toolbar-pinning.component.html

@@ -1,4 +1,4 @@
-<div [ngClass]="{'grid__wrapper': true, 'dark-theme': dark }">
+<div [ngClass]="{'grid__wrapper': true, 'dark-theme': useDarkTheme }">
     <igx-tree-grid [igxPreventDocumentScroll]="true"  #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="false" height="600px"
         width="100%">
         <igx-grid-toolbar>

src/app/tree-grid/tree-grid-column-pinning-sample/tree-grid-toolbar-pinning.component.ts

@@ -14,15 +14,15 @@ import { ActivatedRoute } from '@angular/router';
 export class TreeGridPinningToolbarSampleComponent implements OnInit {
     @ViewChild('treeGrid', { static: true }) public treeGrid: IgxTreeGridComponent;
     public data: any[];
-    public dark: boolean = false;
+    public useDarkTheme: boolean = false;
 
     constructor(private activatedRoute: ActivatedRoute) {
         this.data = generateEmployeeDetailedFlatData();
     }
 
     public ngOnInit(): void {
         this.activatedRoute.queryParams.subscribe(params => {
-            this.dark = params.dark === 'true' ? true : false;
+            this.useDarkTheme = params.dark === 'true';
         });
     }
 }