101577: Ensure renderComponentInstance is called in ngOnChanges if the component is not initialised yet

Author: alexandrevryghem

src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/collection-search-result/collection-admin-search-result-grid-element.component.spec.ts

@@ -14,6 +14,8 @@ import { By } from '@angular/platform-browser';
 import { RouterTestingModule } from '@angular/router/testing';
 import { getCollectionEditRoute } from '../../../../../collection-page/collection-page-routing-paths';
 import { LinkService } from '../../../../../core/cache/builders/link.service';
+import { ThemeService } from '../../../../../shared/theme-support/theme.service';
+import { getMockThemeService } from '../../../../../shared/mocks/theme-service.mock';
 
 describe('CollectionAdminSearchResultGridElementComponent', () => {
   let component: CollectionAdminSearchResultGridElementComponent;
@@ -45,7 +47,8 @@ describe('CollectionAdminSearchResultGridElementComponent', () => {
       providers: [
         { provide: TruncatableService, useValue: mockTruncatableService },
         { provide: BitstreamDataService, useValue: {} },
-        { provide: LinkService, useValue: linkService }
+        { provide: LinkService, useValue: linkService },
+        { provide: ThemeService, useValue: getMockThemeService() },
       ]
     })
       .compileComponents();

src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/community-search-result/community-admin-search-result-grid-element.component.spec.ts

@@ -16,6 +16,8 @@ import { CommunitySearchResult } from '../../../../../shared/object-collection/s
 import { Community } from '../../../../../core/shared/community.model';
 import { getCommunityEditRoute } from '../../../../../community-page/community-page-routing-paths';
 import { LinkService } from '../../../../../core/cache/builders/link.service';
+import { ThemeService } from '../../../../../shared/theme-support/theme.service';
+import { getMockThemeService } from '../../../../../shared/mocks/theme-service.mock';
 
 describe('CommunityAdminSearchResultGridElementComponent', () => {
   let component: CommunityAdminSearchResultGridElementComponent;
@@ -47,7 +49,8 @@ describe('CommunityAdminSearchResultGridElementComponent', () => {
       providers: [
         { provide: TruncatableService, useValue: mockTruncatableService },
         { provide: BitstreamDataService, useValue: {} },
-        { provide: LinkService, useValue: linkService }
+        { provide: LinkService, useValue: linkService },
+        { provide: ThemeService, useValue: getMockThemeService() },
       ],
       schemas: [NO_ERRORS_SCHEMA]
     })

src/app/shared/theme-support/themed.component.ts

@@ -10,8 +10,8 @@ import {
   ChangeDetectorRef,
   OnChanges
 } from '@angular/core';
-import { hasValue, isNotEmpty } from '../empty.util';
-import { from as fromPromise, Observable, of as observableOf, Subscription } from 'rxjs';
+import { hasNoValue, hasValue, isNotEmpty } from '../empty.util';
+import { combineLatest, from as fromPromise, Observable, of as observableOf, Subscription } from 'rxjs';
 import { ThemeService } from './theme.service';
 import { catchError, switchMap, map } from 'rxjs/operators';
 import { GenericConstructor } from '../../core/shared/generic-constructor';
@@ -25,6 +25,7 @@ export abstract class ThemedComponent<T> implements OnInit, OnDestroy, OnChanges
   @ViewChild('vcr', { read: ViewContainerRef }) vcr: ViewContainerRef;
   protected compRef: ComponentRef<T>;
 
+  protected lazyLoadObs: Observable<any>;
   protected lazyLoadSub: Subscription;
   protected themeSub: Subscription;
 
@@ -43,50 +44,73 @@ export abstract class ThemedComponent<T> implements OnInit, OnDestroy, OnChanges
   protected abstract importUnthemedComponent(): Promise<any>;
 
   ngOnChanges(changes: SimpleChanges): void {
-    // if an input or output has changed
-    if (this.inAndOutputNames.some((name: any) => hasValue(changes[name]))) {
-      this.connectInputsAndOutputs();
+    if (hasNoValue(this.compRef)) {
+      // sometimes the component has not been initialized yet, so it first needs to be initialized
+      // before being called again
+      this.initComponentInstance(changes);
+    } else {
+      // if an input or output has changed
+      if (this.inAndOutputNames.some((name: any) => hasValue(changes[name]))) {
+        this.connectInputsAndOutputs();
+        if (this.compRef?.instance && 'ngOnChanges' in this.compRef.instance) {
+          (this.compRef.instance as any).ngOnChanges(changes);
+        }
+      }
     }
   }
 
   ngOnInit(): void {
     this.destroyComponentInstance();
-    this.themeSub = this.themeService.getThemeName$().subscribe(() => {
-      this.renderComponentInstance();
-    });
+    this.initComponentInstance();
   }
 
   ngOnDestroy(): void {
     [this.themeSub, this.lazyLoadSub].filter((sub) => hasValue(sub)).forEach((sub) => sub.unsubscribe());
     this.destroyComponentInstance();
   }
 
-  protected renderComponentInstance(): void {
-    this.destroyComponentInstance();
+  initComponentInstance(changes?: SimpleChanges) {
+    this.themeSub = this.themeService?.getThemeName$().subscribe(() => {
+      this.renderComponentInstance(changes);
+    });
+  }
 
+  protected renderComponentInstance(changes?: SimpleChanges): void {
     if (hasValue(this.lazyLoadSub)) {
       this.lazyLoadSub.unsubscribe();
     }
 
-    this.lazyLoadSub = this.resolveThemedComponent(this.themeService.getThemeName()).pipe(
-      switchMap((themedFile: any) => {
-        if (hasValue(themedFile) && hasValue(themedFile[this.getComponentName()])) {
-          // if the file is not null, and exports a component with the specified name,
-          // return that component
-          return [themedFile[this.getComponentName()]];
-        } else {
-          // otherwise import and return the default component
-          return fromPromise(this.importUnthemedComponent()).pipe(
-            map((unthemedFile: any) => {
-              return unthemedFile[this.getComponentName()];
-            })
-          );
-        }
-      }),
-    ).subscribe((constructor: GenericConstructor<T>) => {
+    if (hasNoValue(this.lazyLoadObs)) {
+      this.destroyComponentInstance();
+
+      this.lazyLoadObs = combineLatest([
+        observableOf(changes),
+        this.resolveThemedComponent(this.themeService.getThemeName()).pipe(
+          switchMap((themedFile: any) => {
+            if (hasValue(themedFile) && hasValue(themedFile[this.getComponentName()])) {
+              // if the file is not null, and exports a component with the specified name,
+              // return that component
+              return [themedFile[this.getComponentName()]];
+            } else {
+              // otherwise import and return the default component
+              return fromPromise(this.importUnthemedComponent()).pipe(
+                map((unthemedFile: any) => {
+                  return unthemedFile[this.getComponentName()];
+                })
+              );
+            }
+          })),
+      ]);
+    }
+
+    this.lazyLoadSub = this.lazyLoadObs.subscribe(([simpleChanges, constructor]: [SimpleChanges, GenericConstructor<T>]) => {
       const factory = this.resolver.resolveComponentFactory(constructor);
       this.compRef = this.vcr.createComponent(factory);
-      this.connectInputsAndOutputs();
+      if (hasValue(simpleChanges)) {
+        this.ngOnChanges(simpleChanges);
+      } else {
+        this.connectInputsAndOutputs();
+      }
       this.cdr.markForCheck();
     });
   }