clintonyeb

export interface Search {
  value: string;
  type: string;
}

clintonyeb

import { Component, Input, OnInit } from '@angular/core';
import { Record } from './models/Record';
import { AppService } from './app.service';
import { Observable } from 'rxjs';
import { Search } from './models/Search';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],

clintonyeb

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {FormsModule} from '@angular/forms';
import {DashboardComponent} from './dashboard/dashboard.component';
import {NgxChartsModule} from '@swimlane/ngx-charts';
import { NgSelectModule } from '@ng-select/ng-select';
import {HttpClientModule} from '@angular/common/http';

/**

clintonyeb

.block {
  width: 700px;
  background: green;
  color: #ffffff;

  .header {
    padding: 15px;

    .difference,
    .average {

clintonyeb

import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
import { WebSocketSubject } from 'rxjs/webSocket';
import { ICurrency } from '../models/Currency';
import { containerClassBig, lastNMembers } from '../utils/utils';

/**
 * Dashboard component with decorators encapsulation: ViewEncapsulation.None, - allow to use global css
 */
@Component({
  selector: 'app-dashboard',

clintonyeb

<!-- 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

clintonyeb

<!-- *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]"

clintonyeb

.dashboard-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.dashboard-column {
  display: flex;
  flex-direction: column;

clintonyeb

import {Component} from '@angular/core';
import {Observable} from 'rxjs';
import {AppService} from './app.service';
import {ICurrency} from './models/Currency';

/**
 * Main application component
 *  selector: 'app-root', same in index.html element that start to run this component
 */
@Component({

clintonyeb

/**
 * @param {string} array Array
 * @param {string} n  Number of values that needs to be returned from Array
 * @returns return new Array with the size n
 */
export function lastNMembers(array, n) {
  if (array == null) {
    return void 0;
  }
  if (n == null) {