app.component.html

<!-- *ngIf - directive that creates elements only if $pairs | async is true  -->
<!-- | async - run the observable and create variable 'let pairs' depends of result  -->
<main *ngIf="$pairs | async; let pairs" class="dashboard-row">
  <div class="dashboard-column">
    <!-- app-dashboard - component that declared inside app.module.ts   -->
    <!-- [currentCurrency] has it`s description  @Input() public currentCurrency: ICurrency; that create bindings to add data into element    -->
    <!-- with [currentCurrency] we send data into this.currentCurrency  -->
    <!-- same with [name] &  [currencyList]  -->
    <app-dashboard
      [currentCurrency]="pairs[0]"
      [name]="pairs[0]?.currency_name"
      [currencyList]="pairs"
    >
    </app-dashboard>

    <app-dashboard
      [currentCurrency]="pairs[1]"
      [name]="pairs[1]?.currency_name"
      [currencyList]="pairs"
    >
    </app-dashboard>
  </div>
  <div class="dashboard-column">
    <app-dashboard
      [currentCurrency]="pairs[2]"
      [name]="pairs[2]?.currency_name"
      [currencyList]="pairs"
    >
    </app-dashboard>
    <app-dashboard
      [currentCurrency]="pairs[3]"
      [name]="pairs[3]?.currency_name"
      [currencyList]="pairs"
    >
    </app-dashboard>
  </div>
</main>