The <mat-table>, an Angular Directives, is used to create table with material design and styling.

In this chapter, we will showcase the configuration required to show a Table using Angular Material.

Following is the content of the modified module descriptor app.module.ts.

import { BrowserModule } from ''@angular/platform-browser'';
import { NgModule } from ''@angular/core'';
import { AppComponent } from ''./app.component'';
import {BrowserAnimationsModule} from ''@angular/platform-browser/animations'';
import {MatTableModule} from ''@angular/material''
import {FormsModule, ReactiveFormsModule} from ''@angular/forms'';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatTableModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Following is the content of the modified HTML host file app.component.html.

<table mat-table [dataSource] = "dataSource" class = "mat-elevation-z8"> 
   <ng-container matColumnDef = "name">
      <th mat-header-cell *matHeaderCellDef> Dessert (100g)</th>
      <td mat-cell *matCellDef = "let element"> {{element.name}} </td>
   </ng-container>
   <ng-container matColumnDef = "calories">
      <th mat-header-cell *matHeaderCellDef>Calories</th>
      <td mat-cell *matCellDef = "let element"> {{element.calories}} </td>
   </ng-container>
   <ng-container matColumnDef = "fat">
      <th mat-header-cell *matHeaderCellDef>Fat (g)</th>
      <td mat-cell *matCellDef = "let element"> {{element.fat}} </td>
   </ng-container>
   <ng-container matColumnDef = "carbs">
      <th mat-header-cell *matHeaderCellDef>Carbs (g)</th>
      <td mat-cell *matCellDef = "let element"> {{element.carbs}} </td>
   </ng-container>
   <ng-container matColumnDef = "protein">
      <th mat-header-cell *matHeaderCellDef>Protein (g)</th>
     <td mat-cell *matCellDef = "let element"> {{element.protein}} </td>
   </ng-container> 
   <tr mat-header-row *matHeaderRowDef = "displayedColumns"></tr>
   <tr mat-row *matRowDef = "let row; columns: displayedColumns;"></tr>
</table>

Following is the content of the modified ts file app.component.css.

table {
   width: 100%;
}

Following is the content of the modified ts file app.component.ts.

import {Component, Injectable} from ''@angular/core'';
import {Sort} from ''@angular/material'';
export interface Food {
   calories: number;
   carbs: number;
   fat: number;
   name: string;
   protein: number;
}
@Component({
   selector: ''app-root'',
   templateUrl: ''app.component.html'',
   styleUrls: [''app.component.css'']
})
export class AppComponent { 
   dataSource: Food[] = [
      {name: ''Yogurt'', calories: 159, fat: 6, carbs: 24, protein: 4},
      {name: ''Sandwich'', calories: 237, fat: 9, carbs: 37, protein: 4},
      {name: ''Eclairs'', calories: 262, fat: 16, carbs: 24, protein: 6},
      {name: ''Cupcakes'', calories: 305, fat: 4, carbs: 67, protein: 4},
      {name: ''Gingerbreads'', calories: 356, fat: 16, carbs: 49, protein: 4},
   ];
   displayedColumns: string[] = [''name'', ''calories'', ''fat'', ''carbs'',''protein''];
}

Result

Verify the result.

Details

• Here, we”ve created a table. Added mat-Table and handles tr and th using mat-row and mat-header-row.