Pushed new version.

src/app/components/stock-card/stock-card.component.css

@@ -0,0 +1,16 @@
+.mat-card {
+  margin: 1rem;
+}
+
+.mat-card-title .mat-icon {
+  cursor: pointer;
+  float: right;
+}
+
+.mat-grid-tile .mat-icon {
+  font-size: 4rem;
+  height: 4rem;
+  width: 4rem;
+}
+
+

src/app/components/stock-card/stock-card.component.html

@@ -0,0 +1,27 @@
+<mat-card>
+  <mat-card-title>{{company.description}} ({{company.symbol}})
+    <mat-icon (click)="remove()" fontIcon="close"></mat-icon>
+  </mat-card-title>
+  <mat-card-content>
+    <ng-container *ngIf="getQuote() | async; let quote">
+      <mat-grid-list cols="4" rowHeight="4:1">
+
+        <mat-grid-tile colspan="2"></mat-grid-tile>
+        <mat-grid-tile colspan="2" rowspan="3">
+          <mat-icon *ngIf="quote.dp>0" color="primary" fontIcon="arrow_upward"></mat-icon>
+          <mat-icon *ngIf="quote.dp<0" color="warn" fontIcon="arrow_downward"></mat-icon>
+          <mat-icon *ngIf="quote.dp==0" fontIcon="east"></mat-icon>
+        </mat-grid-tile>
+
+        <mat-grid-tile><p>Change today: {{quote.dp / 100 | percent: '1.1-1'}}</p></mat-grid-tile>
+        <mat-grid-tile><p>Opening price: {{quote.o | currency: 'USD'}}</p></mat-grid-tile>
+        <mat-grid-tile><p>Current price: {{quote.c | currency: 'USD'}}</p></mat-grid-tile>
+        <mat-grid-tile><p>High price: {{quote.h | currency: 'USD'}}</p></mat-grid-tile>
+      </mat-grid-list>
+    </ng-container>
+  </mat-card-content>
+
+  <mat-card-actions align="end">
+    <button mat-button [routerLink]="'/sentiment/' + company.symbol">Go to social sentiment details</button>
+  </mat-card-actions>
+</mat-card>

src/app/components/stock-card/stock-card.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StockCardComponent } from './stock-card.component';
+
+describe('StockCardComponent', () => {
+  let component: StockCardComponent;
+  let fixture: ComponentFixture<StockCardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ StockCardComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(StockCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/stock-card/stock-card.component.ts

@@ -0,0 +1,40 @@
+import {Component, Input, OnDestroy, OnInit} from '@angular/core';
+import {FinnhubService} from "../../services/finnhub.service";
+import {Company, QuoteResponse} from "../../model/company-data";
+import {Subject, Subscription} from "rxjs";
+import {StorageService} from "../../services/storage.service";
+
+@Component({
+  selector: 'app-stock-card',
+  templateUrl: './stock-card.component.html',
+  styleUrls: ['./stock-card.component.css']
+})
+export class StockCardComponent implements OnInit, OnDestroy {
+
+  @Input()
+  company = {} as Company;
+
+  private _quote$ = new Subject<QuoteResponse>();
+  private subs: Subscription[] = [];
+
+  constructor(public finnhubService: FinnhubService,
+              public storageService: StorageService) {
+  }
+
+  ngOnInit(): void {
+    this.subs.push(this.finnhubService.getQuote(this.company.symbol).subscribe(value => this._quote$.next(value)));
+  }
+
+  getQuote(): Subject<QuoteResponse> {
+    return this._quote$;
+  }
+
+  ngOnDestroy(): void {
+    this.subs.forEach(s => s.unsubscribe());
+    this._quote$.complete();
+  }
+
+  remove() {
+    this.storageService.remove(this.company.symbol);
+  }
+}