Created BrowseByPageComponent that uses the new refactored BrowseBySwitcherComponent extending AbstractComponentLoaderComponent

- Added the context to the rendersBrowseBy decorator
- Created AbstractBrowseByTypeComponent that is extended by all the browse type sections

src/app/browse-by/abstract-browse-by-type.component.ts

@@ -0,0 +1,32 @@
+import { Component, Input, OnDestroy } from '@angular/core';
+import { BrowseByDataType } from './browse-by-switcher/browse-by-decorator';
+import { Context } from '../core/shared/context.model';
+import { Subscription } from 'rxjs';
+import { hasValue } from '../shared/empty.util';
+
+@Component({
+  selector: 'ds-abstract-browse-by-type',
+  template: '',
+})
+export abstract class AbstractBrowseByTypeComponent implements OnDestroy {
+
+  /**
+   * The optional context
+   */
+  @Input() context: Context;
+
+  /**
+   * The {@link BrowseByDataType} of this Component
+   */
+  @Input() browseByType: BrowseByDataType;
+
+  /**
+   * List of subscriptions
+   */
+  subs: Subscription[] = [];
+
+  ngOnDestroy(): void {
+    this.subs.filter((sub: Subscription) => hasValue(sub)).forEach((sub: Subscription) => sub.unsubscribe());
+  }
+
+}

src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.ts

@@ -1,4 +1,4 @@
-import { combineLatest as observableCombineLatest, Observable, Subscription } from 'rxjs';
+import { combineLatest as observableCombineLatest, Observable } from 'rxjs';
 import { Component, Inject, OnInit, OnDestroy } from '@angular/core';
 import { RemoteData } from '../../core/data/remote-data';
 import { PaginatedList } from '../../core/data/paginated-list.model';
@@ -23,6 +23,7 @@ import { Community } from '../../core/shared/community.model';
 import { APP_CONFIG, AppConfig } from '../../../config/app-config.interface';
 import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 import { rendersBrowseBy, BrowseByDataType } from '../browse-by-switcher/browse-by-decorator';
+import { AbstractBrowseByTypeComponent } from '../abstract-browse-by-type.component';
 
 export const BBM_PAGINATION_ID = 'bbm';
 
@@ -38,7 +39,7 @@ export const BBM_PAGINATION_ID = 'bbm';
  * 'dc.contributor.*'
  */
 @rendersBrowseBy(BrowseByDataType.Metadata)
-export class BrowseByMetadataPageComponent implements OnInit, OnDestroy {
+export class BrowseByMetadataPageComponent extends AbstractBrowseByTypeComponent implements OnInit, OnDestroy {
 
   /**
    * The list of browse-entries to display
@@ -75,11 +76,6 @@ export class BrowseByMetadataPageComponent implements OnInit, OnDestroy {
    */
   currentSort$: Observable<SortOptions>;
 
-  /**
-   * List of subscriptions
-   */
-  subs: Subscription[] = [];
-
   /**
    * The default browse id to resort to when none is provided
    */
@@ -132,7 +128,7 @@ export class BrowseByMetadataPageComponent implements OnInit, OnDestroy {
                      @Inject(APP_CONFIG) public appConfig: AppConfig,
                      public dsoNameService: DSONameService,
   ) {
-
+    super();
     this.fetchThumbnails = this.appConfig.browseBy.showThumbnails;
     this.paginationConfig = Object.assign(new PaginationComponentOptions(), {
         id: BBM_PAGINATION_ID,
@@ -276,7 +272,7 @@ export class BrowseByMetadataPageComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    this.subs.filter((sub) => hasValue(sub)).forEach((sub) => sub.unsubscribe());
+    super.ngOnDestroy();
     this.paginationService.clearPagination(this.paginationConfig.id);
   }
 

src/app/browse-by/browse-by-page.module.ts

@@ -5,12 +5,19 @@ import { ItemDataService } from '../core/data/item-data.service';
 import { BrowseService } from '../core/browse/browse.service';
 import { BrowseByGuard } from './browse-by-guard';
 import { SharedBrowseByModule } from '../shared/browse-by/shared-browse-by.module';
+import { BrowseByPageComponent } from './browse-by-page/browse-by-page.component';
+import { SharedModule } from '../shared/shared.module';
+
+const DECLARATIONS = [
+  BrowseByPageComponent,
+];
 
 @NgModule({
   imports: [
     SharedBrowseByModule,
     BrowseByRoutingModule,
-    BrowseByModule.withEntryComponents(),
+    BrowseByModule,
+    SharedModule,
   ],
   providers: [
     ItemDataService,
@@ -18,8 +25,11 @@ import { SharedBrowseByModule } from '../shared/browse-by/shared-browse-by.modul
     BrowseByGuard,
   ],
   declarations: [
-
-  ]
+    ...DECLARATIONS,
+  ],
+  exports: [
+    ...DECLARATIONS,
+  ],
 })
 export class BrowseByPageModule {
 

src/app/browse-by/browse-by-page/browse-by-page.component.html

@@ -0,0 +1,2 @@
+<ds-browse-by-switcher [browseByType]="browseByType$ | async">
+</ds-browse-by-switcher>

src/app/browse-by/browse-by-page/browse-by-page.component.spec.ts

@@ -0,0 +1,69 @@
+// eslint-disable-next-line max-classes-per-file
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BrowseByPageComponent } from './browse-by-page.component';
+import { BrowseBySwitcherComponent } from '../browse-by-switcher/browse-by-switcher.component';
+import { DynamicComponentLoaderDirective } from '../../shared/abstract-component-loader/dynamic-component-loader.directive';
+import { ActivatedRoute } from '@angular/router';
+import { ActivatedRouteStub } from '../../shared/testing/active-router.stub';
+import { getMockThemeService } from '../../shared/mocks/theme-service.mock';
+import { ThemeService } from '../../shared/theme-support/theme.service';
+import { rendersBrowseBy, BrowseByDataType } from '../browse-by-switcher/browse-by-decorator';
+import { Component } from '@angular/core';
+import { AbstractBrowseByTypeComponent } from '../abstract-browse-by-type.component';
+import { BrowseDefinition } from '../../core/shared/browse-definition.model';
+import { By } from '@angular/platform-browser';
+
+@rendersBrowseBy('BrowseByPageComponent' as BrowseByDataType)
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: '',
+  template: '<span id="BrowseByTestComponent"></span>',
+})
+class BrowseByTestComponent extends AbstractBrowseByTypeComponent {
+}
+
+class TestBrowseByPageBrowseDefinition extends BrowseDefinition {
+  getRenderType(): BrowseByDataType {
+    return 'BrowseByPageComponent' as BrowseByDataType;
+  }
+}
+
+describe('BrowseByPageComponent', () => {
+  let component: BrowseByPageComponent;
+  let fixture: ComponentFixture<BrowseByPageComponent>;
+
+  let activatedRoute: ActivatedRouteStub;
+  let themeService: ThemeService;
+
+  beforeEach(async () => {
+    activatedRoute = new ActivatedRouteStub();
+    themeService = getMockThemeService();
+
+    await TestBed.configureTestingModule({
+      declarations: [
+        BrowseByPageComponent,
+        BrowseBySwitcherComponent,
+        DynamicComponentLoaderDirective,
+      ],
+      providers: [
+        BrowseByTestComponent,
+        { provide: ActivatedRoute, useValue: activatedRoute },
+        { provide: ThemeService, useValue: themeService },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BrowseByPageComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create the correct browse section based on the route browseDefinition', () => {
+    activatedRoute.testData = {
+      browseDefinition: new TestBrowseByPageBrowseDefinition(),
+    };
+
+    fixture.detectChanges();
+
+    expect(component).toBeTruthy();
+    expect(fixture.debugElement.query(By.css('#BrowseByTestComponent'))).not.toBeNull();
+  });
+});

src/app/browse-by/browse-by-page/browse-by-page.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import { map } from 'rxjs/operators';
+import { BrowseDefinition } from '../../core/shared/browse-definition.model';
+import { ActivatedRoute } from '@angular/router';
+import { Observable } from 'rxjs';
+import { BrowseByDataType } from '../browse-by-switcher/browse-by-decorator';
+
+@Component({
+  selector: 'ds-browse-by-page',
+  templateUrl: './browse-by-page.component.html',
+  styleUrls: ['./browse-by-page.component.scss'],
+})
+export class BrowseByPageComponent implements OnInit {
+
+  browseByType$: Observable<BrowseByDataType>;
+
+  constructor(
+    protected route: ActivatedRoute,
+  ) {
+  }
+
+  /**
+   * Fetch the correct browse-by component by using the relevant config from the route data
+   */
+  ngOnInit(): void {
+    this.browseByType$ = this.route.data.pipe(
+      map((data: { browseDefinition: BrowseDefinition }) => data.browseDefinition.getRenderType()),
+    );
+  }
+
+}

src/app/browse-by/browse-by-routing.module.ts

@@ -3,7 +3,7 @@ import { NgModule } from '@angular/core';
 import { BrowseByGuard } from './browse-by-guard';
 import { BrowseByDSOBreadcrumbResolver } from './browse-by-dso-breadcrumb.resolver';
 import { BrowseByI18nBreadcrumbResolver } from './browse-by-i18n-breadcrumb.resolver';
-import { ThemedBrowseBySwitcherComponent } from './browse-by-switcher/themed-browse-by-switcher.component';
+import { BrowseByPageComponent } from './browse-by-page/browse-by-page.component';
 import { DSOEditMenuResolver } from '../shared/dso-page/dso-edit-menu.resolver';
 
 @NgModule({
@@ -18,7 +18,7 @@ import { DSOEditMenuResolver } from '../shared/dso-page/dso-edit-menu.resolver';
         children: [
           {
             path: ':id',
-            component: ThemedBrowseBySwitcherComponent,
+            component: BrowseByPageComponent,
             canActivate: [BrowseByGuard],
             resolve: { breadcrumb: BrowseByI18nBreadcrumbResolver },
             data: { title: 'browse.title.page', breadcrumbKey: 'browse.metadata' }

src/app/browse-by/browse-by-switcher/browse-by-decorator.ts

@@ -1,10 +1,9 @@
 import { hasNoValue } from '../../shared/empty.util';
 import { InjectionToken } from '@angular/core';
+import { DEFAULT_THEME, resolveTheme } from '../../shared/object-collection/shared/listable-object/listable-object.decorator';
+import { AbstractBrowseByTypeComponent } from '../abstract-browse-by-type.component';
+import { Context } from '../../core/shared/context.model';
 import { GenericConstructor } from '../../core/shared/generic-constructor';
-import {
-  DEFAULT_THEME,
-  resolveTheme
-} from '../../shared/object-collection/shared/listable-object/listable-object.decorator';
 
 export enum BrowseByDataType {
   Title = 'title',
@@ -14,28 +13,36 @@ export enum BrowseByDataType {
 }
 
 export const DEFAULT_BROWSE_BY_TYPE = BrowseByDataType.Metadata;
+export const DEFAULT_BROWSE_BY_CONTEXT = Context.Any;
 
-export const BROWSE_BY_COMPONENT_FACTORY = new InjectionToken<(browseByType, theme) => GenericConstructor<any>>('getComponentByBrowseByType', {
+export const BROWSE_BY_COMPONENT_FACTORY = new InjectionToken<(browseByType: BrowseByDataType, context: Context, theme: string) => GenericConstructor<AbstractBrowseByTypeComponent>>('getComponentByBrowseByType', {
   providedIn: 'root',
   factory: () => getComponentByBrowseByType
 });
 
-const map = new Map();
+const map: Map<BrowseByDataType, Map<Context, Map<string, GenericConstructor<AbstractBrowseByTypeComponent>>>> = new Map();
 
 /**
  * Decorator used for rendering Browse-By pages by type
  * @param browseByType  The type of page
+ * @param context The optional context for the component
  * @param theme The optional theme for the component
  */
-export function rendersBrowseBy(browseByType: string, theme = DEFAULT_THEME) {
+export function rendersBrowseBy(browseByType: BrowseByDataType, context = DEFAULT_BROWSE_BY_CONTEXT, theme = DEFAULT_THEME) {
   return function decorator(component: any) {
+    if (hasNoValue(browseByType)) {
+      return;
+    }
     if (hasNoValue(map.get(browseByType))) {
       map.set(browseByType, new Map());
     }
-    if (hasNoValue(map.get(browseByType).get(theme))) {
-      map.get(browseByType).set(theme, component);
+    if (hasNoValue(map.get(browseByType).get(context))) {
+      map.get(browseByType).set(context, new Map());
+    }
+    if (hasNoValue(map.get(browseByType).get(context).get(theme))) {
+      map.get(browseByType).get(context).set(theme, component);
     } else {
-      throw new Error(`There can't be more than one component to render Browse-By of type "${browseByType}" and theme "${theme}"`);
+      throw new Error(`There can't be more than one component to render Browse-By of type "${browseByType}", context "${context}" and theme "${theme}"`);
     }
   };
 }
@@ -43,12 +50,17 @@ export function rendersBrowseBy(browseByType: string, theme = DEFAULT_THEME) {
 /**
  * Get the component used for rendering a Browse-By page by type
  * @param browseByType  The type of page
+ * @param context The context to match
  * @param theme the theme to match
  */
-export function getComponentByBrowseByType(browseByType, theme) {
-  let themeMap = map.get(browseByType);
+export function getComponentByBrowseByType(browseByType: BrowseByDataType, context: Context, theme: string): GenericConstructor<AbstractBrowseByTypeComponent> {
+  let contextMap: Map<Context, Map<string, GenericConstructor<AbstractBrowseByTypeComponent>>> = map.get(browseByType);
+  if (hasNoValue(contextMap)) {
+    contextMap = map.get(DEFAULT_BROWSE_BY_TYPE);
+  }
+  let themeMap: Map<string, GenericConstructor<AbstractBrowseByTypeComponent>> = contextMap.get(context);
   if (hasNoValue(themeMap)) {
-    themeMap = map.get(DEFAULT_BROWSE_BY_TYPE);
+    themeMap = contextMap.get(DEFAULT_BROWSE_BY_CONTEXT);
   }
   const comp = resolveTheme(themeMap, theme);
   if (hasNoValue(comp)) {

src/app/browse-by/browse-by-switcher/browse-by-switcher.component.html

@@ -1 +0,0 @@
-<ng-container *ngComponentOutlet="browseByComponent | async"></ng-container>

src/app/browse-by/browse-by-switcher/browse-by-switcher.component.spec.ts

@@ -1,13 +1,23 @@
 import { BrowseBySwitcherComponent } from './browse-by-switcher.component';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { BROWSE_BY_COMPONENT_FACTORY, BrowseByDataType } from './browse-by-decorator';
-import { BehaviorSubject } from 'rxjs';
+import { SimpleChange, Component } from '@angular/core';
+import { BrowseByDataType, rendersBrowseBy } from './browse-by-decorator';
 import { ThemeService } from '../../shared/theme-support/theme.service';
 import { FlatBrowseDefinition } from '../../core/shared/flat-browse-definition.model';
 import { ValueListBrowseDefinition } from '../../core/shared/value-list-browse-definition.model';
 import { NonHierarchicalBrowseDefinition } from '../../core/shared/non-hierarchical-browse-definition';
+import { getMockThemeService } from '../../shared/mocks/theme-service.mock';
+import { DynamicComponentLoaderDirective } from '../../shared/abstract-component-loader/dynamic-component-loader.directive';
+import { AbstractBrowseByTypeComponent } from '../abstract-browse-by-type.component';
+
+@rendersBrowseBy('BrowseBySwitcherComponent' as BrowseByDataType)
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: '',
+  template: '<span id="BrowseByTestComponent"></span>',
+})
+class BrowseByTestComponent extends AbstractBrowseByTypeComponent {
+}
 
 describe('BrowseBySwitcherComponent', () => {
   let comp: BrowseBySwitcherComponent;
@@ -41,46 +51,45 @@ describe('BrowseBySwitcherComponent', () => {
     ),
   ];
 
-  const data = new BehaviorSubject(createDataWithBrowseDefinition(new FlatBrowseDefinition()));
-
-  const activatedRouteStub = {
-    data
-  };
-
   let themeService: ThemeService;
-  let themeName: string;
+  const themeName = 'dspace';
 
   beforeEach(waitForAsync(() => {
-    themeName = 'dspace';
-    themeService = jasmine.createSpyObj('themeService', {
-      getThemeName: themeName,
-    });
+    themeService = getMockThemeService(themeName);
 
-    TestBed.configureTestingModule({
-      declarations: [BrowseBySwitcherComponent],
-      providers: [
-        { provide: ActivatedRoute, useValue: activatedRouteStub },
-        { provide: ThemeService, useValue: themeService },
-        { provide: BROWSE_BY_COMPONENT_FACTORY, useValue: jasmine.createSpy('getComponentByBrowseByType').and.returnValue(null) }
+    void TestBed.configureTestingModule({
+      declarations: [
+        BrowseBySwitcherComponent,
+        DynamicComponentLoaderDirective,
+      ],
+      providers: [
+        BrowseByTestComponent,
+        { provide: ThemeService, useValue: themeService },
       ],
-      schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();
   }));
 
   beforeEach(waitForAsync(() => {
     fixture = TestBed.createComponent(BrowseBySwitcherComponent);
     comp = fixture.componentInstance;
+    spyOn(comp, 'getComponent').and.returnValue(BrowseByTestComponent);
+    spyOn(comp, 'connectInputsAndOutputs').and.callThrough();
   }));
 
   types.forEach((type: NonHierarchicalBrowseDefinition) => {
     describe(`when switching to a browse-by page for "${type.id}"`, () => {
-      beforeEach(() => {
-        data.next(createDataWithBrowseDefinition(type));
+      beforeEach(async () => {
+        comp.browseByType = type.dataType;
+        comp.ngOnChanges({
+          browseByType: new SimpleChange(undefined, type.dataType, true),
+        });
         fixture.detectChanges();
+        await fixture.whenStable();
       });
 
-      it(`should call getComponentByBrowseByType with type "${type.dataType}"`, () => {
-        expect((comp as any).getComponentByBrowseByType).toHaveBeenCalledWith(type.dataType, themeName);
+      it(`should call getComponent with type "${type.dataType}"`, () => {
+        expect(comp.getComponent).toHaveBeenCalled();
+        expect(comp.connectInputsAndOutputs).toHaveBeenCalled();
       });
     });
   });

src/app/browse-by/browse-by-switcher/browse-by-switcher.component.ts

@@ -1,38 +1,29 @@
-import { Component, Inject, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
-import { BROWSE_BY_COMPONENT_FACTORY } from './browse-by-decorator';
+import { Component, Input } from '@angular/core';
+import { getComponentByBrowseByType, BrowseByDataType } from './browse-by-decorator';
 import { GenericConstructor } from '../../core/shared/generic-constructor';
-import { BrowseDefinition } from '../../core/shared/browse-definition.model';
-import { ThemeService } from '../../shared/theme-support/theme.service';
+import { AbstractComponentLoaderComponent } from '../../shared/abstract-component-loader/abstract-component-loader.component';
+import { AbstractBrowseByTypeComponent } from '../abstract-browse-by-type.component';
 
 @Component({
   selector: 'ds-browse-by-switcher',
-  templateUrl: './browse-by-switcher.component.html'
+  templateUrl: '../../shared/abstract-component-loader/abstract-component-loader.component.html'
 })
-/**
- * Component for determining what Browse-By component to use depending on the metadata (browse ID) provided
- */
-export class BrowseBySwitcherComponent implements OnInit {
+export class BrowseBySwitcherComponent extends AbstractComponentLoaderComponent<AbstractBrowseByTypeComponent> {
 
-  /**
-   * Resolved browse-by component
-   */
-  browseByComponent: Observable<any>;
+  @Input() browseByType: BrowseByDataType;
 
-  public constructor(protected route: ActivatedRoute,
-                     protected themeService: ThemeService,
-                     @Inject(BROWSE_BY_COMPONENT_FACTORY) private getComponentByBrowseByType: (browseByType, theme) => GenericConstructor<any>) {
-  }
+  protected inputNamesDependentForComponent: (keyof this & string)[] = [
+    ...this.inputNamesDependentForComponent,
+    'browseByType',
+  ];
 
-  /**
-   * Fetch the correct browse-by component by using the relevant config from the route data
-   */
-  ngOnInit(): void {
-    this.browseByComponent = this.route.data.pipe(
-      map((data: { browseDefinition: BrowseDefinition }) => this.getComponentByBrowseByType(data.browseDefinition.getRenderType(), this.themeService.getThemeName()))
-    );
+  protected inputNames: (keyof this & string)[] = [
+    ...this.inputNames,
+    'browseByType',
+  ];
+
+  public getComponent(): GenericConstructor<AbstractBrowseByTypeComponent> {
+    return getComponentByBrowseByType(this.browseByType, this.context, this.themeService.getThemeName());
   }
 
 }

src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.ts

@@ -1,14 +1,13 @@
-import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { VocabularyOptions } from '../../core/submission/vocabularies/models/vocabulary-options.model';
 import { VocabularyEntryDetail } from '../../core/submission/vocabularies/models/vocabulary-entry-detail.model';
 import { ActivatedRoute } from '@angular/router';
-import { Observable, Subscription } from 'rxjs';
+import { Observable } from 'rxjs';
 import { BrowseDefinition } from '../../core/shared/browse-definition.model';
-import { GenericConstructor } from '../../core/shared/generic-constructor';
-import { BROWSE_BY_COMPONENT_FACTORY, rendersBrowseBy, BrowseByDataType } from '../browse-by-switcher/browse-by-decorator';
+import { rendersBrowseBy, BrowseByDataType } from '../browse-by-switcher/browse-by-decorator';
 import { map } from 'rxjs/operators';
-import { ThemeService } from 'src/app/shared/theme-support/theme.service';
 import { HierarchicalBrowseDefinition } from '../../core/shared/hierarchical-browse-definition.model';
+import { AbstractBrowseByTypeComponent } from '../abstract-browse-by-type.component';
 
 @Component({
   selector: 'ds-browse-by-taxonomy-page',
@@ -19,7 +18,7 @@ import { HierarchicalBrowseDefinition } from '../../core/shared/hierarchical-bro
  * Component for browsing items by metadata in a hierarchical controlled vocabulary
  */
 @rendersBrowseBy(BrowseByDataType.Hierarchy)
-export class BrowseByTaxonomyPageComponent implements OnInit, OnDestroy {
+export class BrowseByTaxonomyPageComponent extends AbstractBrowseByTypeComponent implements OnInit, OnDestroy {
 
   /**
    * The {@link VocabularyOptions} object
@@ -52,28 +51,23 @@ export class BrowseByTaxonomyPageComponent implements OnInit, OnDestroy {
   queryParams: any;
 
   /**
-   * Resolved browse-by component
+   * Resolved browse-by definition
    */
-  browseByComponent: Observable<any>;
+  browseDefinition$: Observable<BrowseDefinition>;
 
-  /**
-   * Subscriptions to track
-   */
-  browseByComponentSubs: Subscription[] = [];
-
-  public constructor( protected route: ActivatedRoute,
-                      protected themeService: ThemeService,
-                      @Inject(BROWSE_BY_COMPONENT_FACTORY) private getComponentByBrowseByType: (browseByType, theme) => GenericConstructor<any>) {
+  public constructor(
+    protected route: ActivatedRoute,
+  ) {
+    super();
   }
 
   ngOnInit(): void {
-    this.browseByComponent = this.route.data.pipe(
+    this.browseDefinition$ = this.route.data.pipe(
       map((data: { browseDefinition: BrowseDefinition }) => {
-        this.getComponentByBrowseByType(data.browseDefinition.getRenderType(), this.themeService.getThemeName());
         return data.browseDefinition;
       })
     );
-    this.browseByComponentSubs.push(this.browseByComponent.subscribe((browseDefinition: HierarchicalBrowseDefinition) => {
+    this.subs.push(this.browseDefinition$.subscribe((browseDefinition: HierarchicalBrowseDefinition) => {
       this.facetType = browseDefinition.facetType;
       this.vocabularyName = browseDefinition.vocabulary;
       this.vocabularyOptions = { name: this.vocabularyName, closed: true };
@@ -113,7 +107,4 @@ export class BrowseByTaxonomyPageComponent implements OnInit, OnDestroy {
     };
   }
 
-  ngOnDestroy(): void {
-    this.browseByComponentSubs.forEach((sub: Subscription) => sub.unsubscribe());
-  }
 }

src/app/browse-by/browse-by.module.ts

@@ -5,12 +5,15 @@ import { BrowseByMetadataPageComponent } from './browse-by-metadata-page/browse-
 import { BrowseByDatePageComponent } from './browse-by-date-page/browse-by-date-page.component';
 import { BrowseBySwitcherComponent } from './browse-by-switcher/browse-by-switcher.component';
 import { BrowseByTaxonomyPageComponent } from './browse-by-taxonomy-page/browse-by-taxonomy-page.component';
-import { ThemedBrowseBySwitcherComponent } from './browse-by-switcher/themed-browse-by-switcher.component';
 import { ComcolModule } from '../shared/comcol/comcol.module';
 import { SharedBrowseByModule } from '../shared/browse-by/shared-browse-by.module';
 import { DsoPageModule } from '../shared/dso-page/dso-page.module';
 import { FormModule } from '../shared/form/form.module';
 
+const DECLARATIONS = [
+  BrowseBySwitcherComponent,
+];
+
 const ENTRY_COMPONENTS = [
   // put only entry components that use custom decorator
   BrowseByTitlePageComponent,
@@ -28,12 +31,12 @@ const ENTRY_COMPONENTS = [
     FormModule,
   ],
   declarations: [
-    BrowseBySwitcherComponent,
-    ThemedBrowseBySwitcherComponent,
+    ...DECLARATIONS,
     ...ENTRY_COMPONENTS
   ],
   exports: [
-    BrowseBySwitcherComponent
+    ...DECLARATIONS,
+    ...ENTRY_COMPONENTS,
   ]
 })
 export class BrowseByModule {

src/app/core/shared/browse-definition.model.ts

@@ -1,5 +1,6 @@
 import { autoserialize } from 'cerialize';
 import { CacheableObject } from '../cache/cacheable-object.model';
+import { BrowseByDataType } from '../../browse-by/browse-by-switcher/browse-by-decorator';
 
 /**
  * Base class for BrowseDefinition models
@@ -12,5 +13,5 @@ export abstract class BrowseDefinition extends CacheableObject {
   /**
    * Get the render type of the BrowseDefinition model
    */
-  abstract getRenderType(): string;
+  abstract getRenderType(): BrowseByDataType;
 }

src/app/core/shared/flat-browse-definition.model.ts

@@ -5,6 +5,7 @@ import { FLAT_BROWSE_DEFINITION } from './flat-browse-definition.resource-type';
 import { ResourceType } from './resource-type';
 import { NonHierarchicalBrowseDefinition } from './non-hierarchical-browse-definition';
 import { HALLink } from './hal-link.model';
+import { BrowseByDataType } from '../../browse-by/browse-by-switcher/browse-by-decorator';
 
 /**
  * BrowseDefinition model for browses of type 'flatBrowse'
@@ -30,7 +31,7 @@ export class FlatBrowseDefinition extends NonHierarchicalBrowseDefinition {
     items: HALLink;
   };
 
-  getRenderType(): string {
+  getRenderType(): BrowseByDataType {
     return this.dataType;
   }
 }

src/app/core/shared/hierarchical-browse-definition.model.ts

@@ -5,6 +5,7 @@ import { HIERARCHICAL_BROWSE_DEFINITION } from './hierarchical-browse-definition
 import { HALLink } from './hal-link.model';
 import { ResourceType } from './resource-type';
 import { BrowseDefinition } from './browse-definition.model';
+import { BrowseByDataType } from '../../browse-by/browse-by-switcher/browse-by-decorator';
 
 /**
  * BrowseDefinition model for browses of type 'hierarchicalBrowse'
@@ -39,7 +40,7 @@ export class HierarchicalBrowseDefinition extends BrowseDefinition {
     vocabulary: HALLink;
   };
 
-  getRenderType(): string {
-    return 'hierarchy';
+  getRenderType(): BrowseByDataType {
+    return BrowseByDataType.Hierarchy;
   }
 }

src/app/core/shared/value-list-browse-definition.model.ts

@@ -5,6 +5,7 @@ import { VALUE_LIST_BROWSE_DEFINITION } from './value-list-browse-definition.res
 import { ResourceType } from './resource-type';
 import { NonHierarchicalBrowseDefinition } from './non-hierarchical-browse-definition';
 import { HALLink } from './hal-link.model';
+import { BrowseByDataType } from '../../browse-by/browse-by-switcher/browse-by-decorator';
 
 /**
  * BrowseDefinition model for browses of type 'valueList'
@@ -30,7 +31,7 @@ export class ValueListBrowseDefinition extends NonHierarchicalBrowseDefinition {
     entries: HALLink;
   };
 
-  getRenderType(): string {
+  getRenderType(): BrowseByDataType {
     return this.dataType;
   }
 }

src/app/shared/abstract-component-loader/abstract-component-loader.component.ts

@@ -125,7 +125,7 @@ export abstract class AbstractComponentLoaderComponent<T> implements OnInit, OnC
    * Connect the inputs and outputs of this component to the dynamic component,
    * to ensure they're in sync
    */
-  protected connectInputsAndOutputs(): void {
+  public connectInputsAndOutputs(): void {
     if (isNotEmpty(this.inputNames) && hasValue(this.compRef) && hasValue(this.compRef.instance)) {
       this.inputNames.filter((name: string) => this[name] !== undefined).filter((name: string) => this[name] !== this.compRef.instance[name]).forEach((name: string) => {
         // Using setInput will automatically trigger the ngOnChanges

src/app/shared/object-collection/shared/listable-object/listable-object-component-loader.component.spec.ts

@@ -91,7 +91,7 @@ describe('ListableObjectComponentLoaderComponent', () => {
       listableComponent.reloadedObject.emit(reloadedObject);
       tick(200);
 
-      expect(comp.instantiateComponent).toHaveBeenCalledWith(undefined);
+      expect(comp.instantiateComponent).toHaveBeenCalledWith();
     }));
 
     it('should re-emit it as a contentChange', fakeAsync(() => {

src/themes/custom/app/browse-by/browse-by-date-page/browse-by-date-page.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { BrowseByDatePageComponent as BaseComponent } from '../../../../../app/browse-by/browse-by-date-page/browse-by-date-page.component';
 import { rendersBrowseBy, BrowseByDataType } from '../../../../../app/browse-by/browse-by-switcher/browse-by-decorator';
+import { Context } from '../../../../../app/core/shared/context.model';
 
 @Component({
   selector: 'ds-browse-by-date-page',
@@ -9,6 +10,6 @@ import { rendersBrowseBy, BrowseByDataType } from '../../../../../app/browse-by/
   // templateUrl: './browse-by-date-page.component.html'
   templateUrl: '../../../../../app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html'
 })
-@rendersBrowseBy(BrowseByDataType.Date, 'custom')
+@rendersBrowseBy(BrowseByDataType.Date, Context.Any, 'custom')
 export class BrowseByDatePageComponent extends BaseComponent {
 }

src/themes/custom/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { BrowseByMetadataPageComponent as BaseComponent } from '../../../../../app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component';
 import { rendersBrowseBy, BrowseByDataType } from '../../../../../app/browse-by/browse-by-switcher/browse-by-decorator';
+import { Context } from '../../../../../app/core/shared/context.model';
 
 @Component({
   selector: 'ds-browse-by-metadata-page',
@@ -9,6 +10,6 @@ import { rendersBrowseBy, BrowseByDataType } from '../../../../../app/browse-by/
   // templateUrl: './browse-by-metadata-page.component.html'
   templateUrl: '../../../../../app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html'
 })
-@rendersBrowseBy(BrowseByDataType.Metadata, 'custom')
+@rendersBrowseBy(BrowseByDataType.Metadata, Context.Any, 'custom')
 export class BrowseByMetadataPageComponent extends BaseComponent {
 }

src/themes/custom/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { BrowseByTaxonomyPageComponent as BaseComponent } from '../../../../../app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component';
 import { rendersBrowseBy, BrowseByDataType } from '../../../../../app/browse-by/browse-by-switcher/browse-by-decorator';
+import { Context } from '../../../../../app/core/shared/context.model';
 
 @Component({
   selector: 'ds-browse-by-taxonomy-page',
@@ -9,6 +10,6 @@ import { rendersBrowseBy, BrowseByDataType } from '../../../../../app/browse-by/
   // styleUrls: ['./browse-by-taxonomy-page.component.scss'],
   styleUrls: ['../../../../../app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.scss'],
 })
-@rendersBrowseBy(BrowseByDataType.Hierarchy, 'custom')
+@rendersBrowseBy(BrowseByDataType.Hierarchy, Context.Any, 'custom')
 export class BrowseByTaxonomyPageComponent extends BaseComponent {
 }

src/themes/custom/app/browse-by/browse-by-title-page/browse-by-title-page.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { BrowseByTitlePageComponent as BaseComponent } from '../../../../../app/browse-by/browse-by-title-page/browse-by-title-page.component';
 import { rendersBrowseBy, BrowseByDataType } from '../../../../../app/browse-by/browse-by-switcher/browse-by-decorator';
+import { Context } from '../../../../../app/core/shared/context.model';
 
 @Component({
   selector: 'ds-browse-by-title-page',
@@ -9,6 +10,6 @@ import { rendersBrowseBy, BrowseByDataType } from '../../../../../app/browse-by/
   // templateUrl: './browse-by-title-page.component.html'
   templateUrl: '../../../../../app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html'
 })
-@rendersBrowseBy(BrowseByDataType.Title, 'custom')
+@rendersBrowseBy(BrowseByDataType.Title, Context.Any, 'custom')
 export class BrowseByTitlePageComponent extends BaseComponent {
 }