Search page 2.component.html

Simple Changes to component
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!-- Using *ngIf (1) -->
<div *ngIf="selectedOption === 'countries'">
    <div *ngIf="countryResults$ | async as countryResults">
        <app-country-table [apiResults]="countryResults"></app-country-table>
    </div>
</div>
<div *ngIf="selectedOption === 'journals'">
    <div *ngIf="journals$ | async as journals">
        <app-journal-table [apiResults]="journals"></app-journal-table>
    </div>
</div>

<!-- Using *ngSwitch (2) -->
<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>
  1. Simple methodology of selectively showing child components with ngIf statement.
  2. More optimized solution using ngSwitch