Improve Http Request

frontend/src/app/Views/dashboard/dashboard.component.html

@@ -64,7 +64,39 @@
       <div class="heading fix-right-side">
         <div class="vertical-center">Transaktionen</div>
       </div>
-      <mat-card class="placeholder"></mat-card>
+      <div class="stockTable">
+        <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+          <!--- Note that these columns can be defined in any order.
+                The actual rendered columns are set as a property on the row definition" -->
+
+          <!-- Position Column -->
+          <ng-container matColumnDef="position">
+            <th mat-header-cell *matHeaderCellDef>Count</th>
+            <td mat-cell *matCellDef="let element">{{ element.position }}</td>
+          </ng-container>
+
+          <!-- Name Column -->
+          <ng-container matColumnDef="name">
+            <th mat-header-cell *matHeaderCellDef>Pirce</th>
+            <td mat-cell *matCellDef="let element">{{ element.name }}</td>
+          </ng-container>
+
+          <!-- Weight Column -->
+          <ng-container matColumnDef="weight">
+            <th mat-header-cell *matHeaderCellDef>Symbol</th>
+            <td mat-cell *matCellDef="let element">{{ element.weight }}</td>
+          </ng-container>
+
+          <!-- Symbol Column -->
+          <ng-container matColumnDef="symbol">
+            <th mat-header-cell *matHeaderCellDef>Time</th>
+            <td mat-cell *matCellDef="let element">{{ element.symbol }}</td>
+          </ng-container>
+
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+        </table>
+      </div>
     </div>
   </mat-grid-tile>
 </mat-grid-list>

frontend/src/app/Views/dashboard/dashboard.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { throwToolbarMixedModesError } from '@angular/material/toolbar';
 import { DataService } from 'src/app/Services/data.service';
+import { TokenStorageService } from 'src/app/Services/token.service';
 
 export interface PeriodicElement {
   name: string;
@@ -49,11 +50,15 @@ const ELEMENT_DATA: PeriodicElement[] = [
 })
 export class DashboardComponent implements OnInit {
   constructor(private dataService: DataService) {}
-
-  //TODO avoid using ngOnInit() like this
-  //TODO fix server problems
-  async ngOnInit() {
-    const data = await this.dataService.getStockData();
+  ngOnInit() {
+    this.dataService.getStockData().subscribe((response: any) => {
+      console.log(response);
+      //TODO map data on array for display
+    });
+    this.dataService.getTransactionData().subscribe((response: any) => {
+      console.log(response);
+      //TODO map data on array for display
+    });
   }
 
   displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];