clintonyeb

h1 {
  font-size: 30px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  text-align: center;
  margin-bottom: 15px;
}

table {

clintonyeb

<div className="App">
  <table>
    <thead
      app-header
      (search)="searchRecords($event)"
      (sort)="sortRecords()"
    ></thead>
    <tbody
      app-record
      *ngIf="records"

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 { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class AppService {
  constructor(private http: HttpClient) {}

clintonyeb

<input
  type="search"
  className="search-field"
  placeholder="Search..."
  (keyup)="onInputChanged($event)"
/>

clintonyeb

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

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

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>

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>
  <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, 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>();