chore(*): Get dom elements on demand after load. (#835)

Author: MayaKirova

samples/grids/pivot-grid/data-persistence-noop/src/index.ts

@@ -53,11 +53,17 @@ export class Sample {
         filters: null
     };
     public stateKey = 'pivot-grid-state';
-    private gridState: IgcGridStateComponent;
+    private _gridState: IgcGridStateComponent;
+
+    public get gridState() {
+        if (!this._gridState) {
+            this._gridState = document.getElementById('gridState') as IgcGridStateComponent;
+        }
+        return this._gridState;
+    }
 
     constructor() {
         var grid = document.getElementById("grid") as IgcPivotGridComponent;
-        this.gridState = document.getElementById('gridState') as IgcGridStateComponent;
         grid.pivotConfiguration = this.pivotConfiguration;
         PivotNoopData.getData().then((value) => {
             grid.data = value;
@@ -69,8 +75,9 @@ export class Sample {
         saveStateBtn.addEventListener('click', (ev: any) => this.saveGridState());
         restoreStateBtn.addEventListener('click', (ev: any) => this.restoreGridState());
         clearStorageBtn.addEventListener('click', (ev: any) => this.clearStorage());
-
-        this.gridState.addEventListener('stateParsed', (ev:any) => this.stateParsedHandler(ev) );
+        grid.addEventListener("rendered", () => {
+            this.gridState.addEventListener('stateParsed', (ev:any) => this.stateParsedHandler(ev) );
+        });
     }
 
     public saveGridState() {

samples/grids/pivot-grid/state-persistence-main/src/index.ts

@@ -16,7 +16,7 @@ const refreshIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox
 export class Sample {
     private gridData;
     private grid: IgcPivotGridComponent;
-    private gridState: IgcGridStateComponent;
+    private _gridState: IgcGridStateComponent;
     public stateKey = 'pivot-grid-state';
 
     public options: IgcGridStateOptions = {
@@ -40,6 +40,13 @@ export class Sample {
         return data.map((x: any) => x.ProductUnitPrice * x.NumberOfUnits).reduce((a: any, b: any) => Math.max(a,b));
     };
 
+    public get gridState() {
+        if (!this._gridState) {
+            this._gridState = document.getElementById('gridState') as IgcGridStateComponent;
+        }
+        return this._gridState;
+    }
+
     private pivotConfiguration: IgcPivotConfiguration = {
         columns: [
             new IgcPivotDateDimension(
@@ -172,7 +179,6 @@ export class Sample {
     constructor() {
         var grid = this.grid = document.getElementById('grid') as IgcPivotGridComponent;
         this.gridData = new PivotDataFlat();
-        this.gridState = document.getElementById('gridState') as IgcGridStateComponent;
 
         var saveStateBtn = document.getElementById("saveState") as IgcButtonComponent;
         var restoreStateBtn = document.getElementById("restoreState") as IgcButtonComponent;