currency.component.html

<!-- ngClass -directive that allow change css class dynamical  -->
<div class="block" [ngClass]="backgroundColor">
  <header class="header">
    <div class="row">
      <!-- ng-select - third - part component for dropdown, items inside brackets binding elements that throw inside components elements  -->
      <!-- clearable - delete opportunity to delete value    -->
      <!-- searchable - prevent typing    -->
      <!-- change - run function to change value in dropdown    -->
      <!-- [(ngModel)] - two way binding property    -->
      <ng-select
        class="select"
        [items]="currencyList"
        [clearable]="false"
        [searchable]="false"
        (change)="changeCurrency($event)"
        [(ngModel)]="currentCurrency"
      >
      </ng-select>
      <!-- difference - value this.difference inside dashboard.component.ts    -->
      <span class="difference">{{ difference }}</span>
    </div>

    <div class="row">
      <!-- [innerHTML]="averageToDisplay" - allow to add part of html from .ts file   -->
      <div class="average" [innerHTML]="averageToDisplay"></div>
      <div class="ticks">
        <span class="title">No. Of Ticks</span>
        <!-- decreaseNumberOfTicks - run function for decrease    -->
        <span class="toggle" (click)="decreaseNumberOfTicks()">-</span>
        <!-- difference - value this.defaultNumberOfTicks inside dashboard.component.ts    -->
        <span class="value">{{ defaultNumberOfTicks }}</span>
        <!-- increaseNumberOfTicks - run function for decrease    -->
        <span class="toggle" (click)="increaseNumberOfTicks()">+</span>
      </div>
    </div>
  </header>
  <div class="chart">
    <!-- ng-select - third - part component for chart, values for binding describes inside .ts  -->
    <ngx-charts-line-chart
      [view]="view"
      [legend]="legend"
      [autoScale]="true"
      [scheme]="colorScheme"
      [showXAxisLabel]="showXAxisLabel"
      [showGridLines]="showGridLines"
      [xAxis]="xAxis"
      [yAxis]="yAxis"
      [results]="multi"
    >
    </ngx-charts-line-chart>
  </div>
</div>