fix(grid height): add height to grid and dark as queryparams

Author: multignite

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

@@ -1,10 +1,9 @@
-<div class="grid__wrapper">
+<div [ngClass]="{'grid__wrapper': true, 'dark-theme': dark === true }">
 <igx-hierarchical-grid [igxPreventDocumentScroll]="true"  class="hierarchicalGrid" [data]="localdata" [autoGenerate]="false"
     [height]="'100%'" [width]="'100%'" #hierarchicalGrid>
         <igx-grid-toolbar>
             <igx-grid-toolbar-actions>
                 <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
-                <igx-switch (click)="onThemeChanged()"></igx-switch>
             </igx-grid-toolbar-actions>
         </igx-grid-toolbar>
 

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

@@ -1,25 +1,25 @@
-import { Component, ElementRef } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { CUSTOMERS } from '../../data/hierarchical-data';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
     selector: 'app-hierarchical-grid-toolbar-pinning',
     styleUrls: ['./hierarchical-grid-toolbar-pinning.component.scss'],
     templateUrl: 'hierarchical-grid-toolbar-pinning.component.html'
 })
-export class HGridToolbarPinningComponent {
+export class HGridToolbarPinningComponent implements OnInit {
     public localdata;
+    dark: boolean;
 
-    constructor(private elRef: ElementRef) {
+    constructor(private activatedRoute: ActivatedRoute) {
         this.localdata = CUSTOMERS;
     }
 
-    private parentComponentEl() {
-        return this.elRef.nativeElement.parentElement.parentElement;
+    public ngOnInit(): void {
+        this.activatedRoute.queryParams.subscribe(params => {
+            this.dark = !!params.dark;
+        });
     }
 
-    public onThemeChanged() {
-        const parentEl = this.parentComponentEl();
-        parentEl.classList.toggle('dark-theme')
-    }
 }