Search page.component.html

<!-- Replacing ngSwitch with ng-container -->
<div [ngSwitch]="selectedOption">
  <div *ngSwitchCase="'countries'">
    <div *ngIf="countryResults$ | async as countryResults">
      <app-country-table [apiResults]="countryResults"></app-country-table>
    </div>
  </div>
  <div *ngSwitchCase="'journals'">
    <div *ngIf="journals$ | async as journals">
      <app-journal-table [apiResults]="journals"></app-journal-table>
    </div>
  </div>
</div>

<!-- Click here! (1) -->
<ng-container
  *ngComponentOutlet="selectedComponent; inputs: componentInput"
></ng-container>

1. Instead of an infinite ngSwitchCase, we can choose to instead take a dynamic approach with ngComponentOutlet within an ng-container