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>
- Instead of an infinite
ngSwitchCase
, we can choose to instead take a dynamic approach with ngComponentOutlet
within an ng-container