import { Component } from '@angular/core';
import dashboardData from './json/dashboard.json';
interface dashboard {
  ID: Number;
  car: String;
  driver: String;

}
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'prototype';
  // @ts-ignore
  dashboards: dashboard[] = dashboardData;
}

<div>
  <button mat-raised-button
          class="example-add-tab-button"
          (click)="addTab(selectAfterAdding.checked)">
    Add new tab
  </button>
  <mat-checkbox #selectAfterAdding> Select tab after adding </mat-checkbox>
</div>

<mat-tab-group mat-align-tabs="center">
  <mat-tab label="First" style="height: 100%">
    <div class="example-boundary">
      <div class="example-box" cdkDragBoundary=".example-boundary" cdkDrag>
        <img src="https://lh3.googleusercontent.com/_eWd5RuZfGPlgVcNzsG4S352TTXbZVoHsJju1t2_jFattGC-JaLrRTe02L7tBfQacQ=w600-rwa" height="100%" width="100%">
      </div>
    </div>
  </mat-tab>
  <mat-tab label="Second" >Content 2</mat-tab>
  <mat-tab label="Third" >Content 3</mat-tab>
</mat-tab-group>