fix(grid): async router-outlet triggers onDestroy before ngOnInit Closes #8071

Author: Aleksandyr

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

@@ -270,7 +270,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
 
 
     public get displayContainer(): HTMLElement | undefined {
-        return this.dc.instance._viewContainer.element.nativeElement;
+        return this.dc?.instance?._viewContainer?.element?.nativeElement;
     }
 
     public get virtualHelper() {
@@ -372,11 +372,11 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
     protected removeScrollEventListeners() {
         if (this.igxForScrollOrientation === 'horizontal') {
             this._zone.runOutsideAngular(() =>
-                this.scrollComponent.nativeElement.removeEventListener('scroll', this.func)
+                this.scrollComponent?.nativeElement?.removeEventListener('scroll', this.func)
             );
         } else {
             this._zone.runOutsideAngular(() =>
-                this.scrollComponent.nativeElement.removeEventListener('scroll', this.verticalScrollHandler)
+                this.scrollComponent?.nativeElement?.removeEventListener('scroll', this.verticalScrollHandler)
             );
         }
     }
@@ -717,7 +717,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
      * ```
      */
     public getScroll() {
-        return this.scrollComponent.nativeElement;
+        return this.scrollComponent?.nativeElement;
     }
     /**
      * Returns the size of the element at the specified index.

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

@@ -3288,10 +3288,10 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
 
         this.zone.runOutsideAngular(() => {
             this.observer.disconnect();
-            this.verticalScrollContainer.getScroll().removeEventListener('scroll', this.verticalScrollHandler);
-            this.headerContainer.getScroll().removeEventListener('scroll', this.horizontalScrollHandler);
-            const vertScrDC = this.verticalScrollContainer.displayContainer;
-            vertScrDC.removeEventListener('scroll', this.preventContainerScroll);
+            this.verticalScrollContainer?.getScroll()?.removeEventListener('scroll', this.verticalScrollHandler);
+            this.headerContainer?.getScroll()?.removeEventListener('scroll', this.horizontalScrollHandler);
+            const vertScrDC = this.verticalScrollContainer?.displayContainer;
+            vertScrDC?.removeEventListener('scroll', this.preventContainerScroll);
         });
     }