fix(element): fix change detection for OnPush components

Author: gshokanov

projects/elements/src/lib/lazy-elements/lazy-element-dynamic/lazy-element-dynamic.directive.ts

@@ -4,7 +4,8 @@ import {
   OnInit,
   TemplateRef,
   ViewContainerRef,
-  ComponentFactoryResolver
+  ComponentFactoryResolver,
+  ChangeDetectorRef
 } from '@angular/core';
 
 import {
@@ -32,7 +33,8 @@ export class LazyElementDynamicDirective implements OnInit {
     private vcr: ViewContainerRef,
     private template: TemplateRef<any>,
     private elementsLoaderService: LazyElementsLoaderService,
-    private cfr: ComponentFactoryResolver
+    private cfr: ComponentFactoryResolver,
+    private cdr: ChangeDetectorRef
   ) {}
 
   ngOnInit() {
@@ -70,16 +72,19 @@ export class LazyElementDynamicDirective implements OnInit {
         }
         this.vcr.clear();
         this.vcr.createEmbeddedView(this.template);
+        this.cdr.markForCheck();
       })
       .catch(error => {
         const errorComponent =
           elementConfig.errorComponent || options.errorComponent;
         this.vcr.clear();
         if (this.errorTemplateRef) {
           this.vcr.createEmbeddedView(this.errorTemplateRef);
+          this.cdr.markForCheck();
         } else if (errorComponent) {
           const factory = this.cfr.resolveComponentFactory(errorComponent);
           this.vcr.createComponent(factory);
+          this.cdr.markForCheck();
         } else {
           console.error(
             `${LOG_PREFIX} - Loading of element <${this.tag}> failed, please provide <ng-template #error>Loading failed...</ng-template> and reference it in *axLazyElementDynamic="errorTemplate: error" to display customized error message in place of element\n\n`,

projects/elements/src/lib/lazy-elements/lazy-element/lazy-element.directive.ts

@@ -4,7 +4,8 @@ import {
   OnInit,
   TemplateRef,
   ViewContainerRef,
-  ComponentFactoryResolver
+  ComponentFactoryResolver,
+  ChangeDetectorRef
 } from '@angular/core';
 
 import {
@@ -27,7 +28,8 @@ export class LazyElementDirective implements OnInit {
     private vcr: ViewContainerRef,
     private template: TemplateRef<any>,
     private elementsLoaderService: LazyElementsLoaderService,
-    private cfr: ComponentFactoryResolver
+    private cfr: ComponentFactoryResolver,
+    private cdr: ChangeDetectorRef
   ) {}
 
   ngOnInit() {
@@ -54,16 +56,19 @@ export class LazyElementDirective implements OnInit {
       .then(() => {
         this.vcr.clear();
         this.vcr.createEmbeddedView(this.template);
+        this.cdr.markForCheck();
       })
       .catch(() => {
         this.vcr.clear();
         const errorComponent =
           elementConfig.errorComponent || options.errorComponent;
         if (this.errorTemplateRef) {
           this.vcr.createEmbeddedView(this.errorTemplateRef);
+          this.cdr.markForCheck();
         } else if (errorComponent) {
           const factory = this.cfr.resolveComponentFactory(errorComponent);
           this.vcr.createComponent(factory);
+          this.cdr.markForCheck();
         } else {
           console.error(
             `${LOG_PREFIX} - Loading of element <${elementTag}> failed, please provide <ng-template #error>Loading failed...</ng-template> and reference it in *axLazyElement="errorTemplate: error" to display customized error message in place of element`