get data from graphql

src/app/bestand/bestand.component.html

-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+<table mat-table [dataSource]="products" class="mat-elevation-z8">
 
     <ng-container matColumnDef="id">
         <th mat-header-cell *matHeaderCellDef> ID </th>

src/app/bestand/bestand.component.ts

 import { Component, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { Apollo, gql } from 'apollo-angular';
 
-export interface PeriodicElement {
+export interface Product {
   id: number;
   manufacturer: string;
   name: string;
@@ -8,11 +10,6 @@ export interface PeriodicElement {
   position: string;
 }
 
-const ELEMENT_DATA: PeriodicElement[] = [
-  {id: 1, manufacturer: "Draka", name: "Cat 6a 1,5m", amount: 70, position: "Netzwerk"},
-  {id: 2, manufacturer: "AzDelivery", name: "NODEMCU 32", amount: 3, position: "Schrank"}
-];
-
 @Component({
   selector: 'app-bestand',
   templateUrl: './bestand.component.html',
@@ -20,11 +17,30 @@ const ELEMENT_DATA: PeriodicElement[] = [
 })
 export class BestandComponent implements OnInit {
   displayedColumns: string[] = ['id', 'manufacturer', 'name', 'amount', 'position'];
-  dataSource = ELEMENT_DATA;
+  loading: boolean = true;
+  products: Product[] = [];
+  private querySubscription: Subscription = new Subscription();
+
+  constructor(private apollo: Apollo) { }
 
-  constructor() { }
+  ngOnInit() {
+    this.querySubscription = this.apollo.watchQuery<any>({
+      query: gql`query {
+          products {
+              id
+              name
+          }
+      }`
+    })
+      .valueChanges
+      .subscribe(({ data, loading }) => {
+        this.loading = loading;
+        this.products = data.products;
+      });
+  }
 
-  ngOnInit(): void {
+  ngOnDestroy() {
+    this.querySubscription.unsubscribe();
   }
 
 }