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

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

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

  .header {
    padding: 15px;

    .difference,
    .average {

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

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

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

clintonyeb

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { Search } from '../models/Search';

@Component({
  selector: 'thead[app-header]',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
})
export class HeaderComponent {
  @Output() search = new EventEmitter<Search>();

clintonyeb

<tr>
  <th (click)="onSort()">
    Time
    <img
      src="assets/sort.svg"
      alt="Sort Icon"
      [ngStyle]="{ 'height.px': 20, 'width.px': 20, 'margin-left': 10 }"
    />
  </th>
  <th>Side</th>

clintonyeb

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

@Component({
  selector: 'tbody[app-record]',
  templateUrl: './record.component.html',
  styleUrls: ['./record.component.scss'],
})
export class RecordComponent implements OnInit {

clintonyeb

<tr
    [class]="getStatusColor(record)"
    *ngFor="let record of records"
  >
    <td>{{ record["Time"] }}</td>
    <td>{{ record["Side"] }}</td>
    <td>{{ record["OrderType"] }}</td>
    <td>{{ record["CcyPair"] }}</td>
    <td>{{ record["Price"] }}</td>
    <td>{{ record["Amount"] }}</td>