Angular Material Table

I want to use new angulat material table to show my produkt data. I was unsing old table perfectly but can not adopt to new angular material table.

I am getting my data in this.produkts array which i want to render in new angular material table. I used to render that in old table.

Can someone please tell me how to render my data in new angular table?

Component.ts

getPage(page: number) {
    if (this.produktCache.has(page)) {
      this.produkts = this.produktCache.get(page);
      this.currentPage = page;
    } else {
      this.produktService.getProduktSearch(page.toString(), this.produktsPerPage.toString(), this.filiale, this.artnr, this.produktbez,
        this.werbetext, this.mgeht, this.lfname, this.hinweise, this.bildnummer)
        .then(
          data => {
            this.produkts = data;
            console.log('array', this.produkts);
            this.currentPage = page;
            this.produktCache.set(this.currentPage, this.produkts);
          }).catch(
            (error: any) => {
              console.log('Produkt not found!');
            });
    }
  }

Select allOpen in new window

pervious table:

<mat-card>
  <table class="product-list" *ngIf="produkts">
    <thead>
      <tr>
        <th>{{ 'Artikle Nummer' }}</th>
        <th>{{ 'Filiale' }}</th>
        <th>{{ 'Bezeichnung' }}</th>
        <th>{{ 'Mehr Info' }} </th>
      </tr>
    </thead>
    <tbody>
      <tr [routerLink]="['/rullko/produkt/', product.Bildnummer]" *ngFor="let product of produkts | paginate: { id: 'server', itemsPerPage: produktsPerPage, currentPage: currentPage }">
        <td> {{ product.ARTNR }} </td>
        <td> {{ product.FILIALE }}</td>
        <td> {{ product.PRODUKTBEZ }} </td>
        <td>
          <button mat-icon-button color="primary" [routerLink]="['/rullko/produkt/', product.Bildnummer]">
            <mat-icon>more_vert</mat-icon>
          </button>
        </td>
      </tr>
    </tbody>
  </table>
  <app-pagination (pageChange)="getPage($event)"></app-pagination>
  <mat-card-actions align="end">
    <button mat-raised-button color="warn" [routerLink]="['/rullko/produkt']">
      <mat-icon>clear</mat-icon>CANCEL</button>
  </mat-card-actions>
</mat-card>

Select allOpen in new window

New table:

<table mat-table [dataSource]="this.produkts" class="mat-elevation-z8">
  <ng-container matColumnDef="artikle">
    <th mat-header-cell *matHeaderCellDef> ARTIKLE NO. </th>
    <td mat-cell *matCellDef="let user"> {{ this.produkts.ARTNR }}</td>
  </ng-container>
  <ng-container matColumnDef="filiale">
    <th mat-header-cell *matHeaderCellDef> FILIALE </th>
    <td mat-cell *matCellDef="let user"> </td>
  </ng-container>
  <ng-container matColumnDef="bezeichnung">
    <th mat-header-cell *matHeaderCellDef> BEZEICHNUNG </th>
    <td mat-cell *matCellDef="let user"> </td>
  </ng-container>
  <ng-container matColumnDef="details">
    <th mat-header-cell *matHeaderCellDef> DETAILS </th>
    <td mat-cell *matCellDef="let user"> </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
  <tr mat-row *matRowDef="let myRowData; columns: columnsToDisplay"></tr>
</table>

Select allOpen in new window