Using Angular Material Table

How to Use Angular Material Table or mat-table?

Getting Started

You can follow the following steps to setup your Angular app with bootstrap and Angular material.

Once you have the Angular app set up, you need to import the MatTableModule in the app.module.ts.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http'
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTableModule } from '@angular/material/table';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    HttpClientModule,
    MatTableModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now you are good to use mat-table in your Angular app.

I have a service file created in the Angular app to fetch some dummy data to render in the mat-table

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private http : HttpClient) { }

  getUsers(){
    return this.http.get('https://jsonplaceholder.typicode.com/users');
  }
}

Display Data in Mat Table

You can use the getUsers method to fetch the data. You need to predefine the fields you want to show inside the table. Define it in the app.component.ts file.

columnsToDisplay = ['name','username','email', 'website'];

Next you need to define a dataSource variable which will be used to bind data to the table. You can set data to dataSource from the getUsers method. Here is how the app.component.ts file looks:

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  dataSource : any = [];

  columnsToDisplay = ['name','username','email', 'website'];

  constructor(private service : DataService){}

  ngOnInit(){
    this.service.getUsers().subscribe((response) => {
      this.dataSource = response;
    })
  }
}

Inside the app.component.html file you can add the following HTML code:

<div class="container">
  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
     
  </table>
</div>

As you would have noticed we have set the dataSource for the table and to make it a mat-table we have added the mat-table directive.

For each column of the table, you need to define an ng-container as shown:

<ng-container matColumnDef="name">
   <th mat-header-cell *matHeaderCellDef> Name </th>
   <td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>

matColumnDef maps to the field name specified in the columnsToDisplay array in the app.component.ts. In the above code, it maps to the name field. mat-header-cell directive is used to define the column header name and mat-cell to define the cell value.

Similarly, you can define the ng-container for each of the columns to be displayed in the mat-table.

<div class="container">
  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>
  
    <ng-container matColumnDef="username">
      <th mat-header-cell *matHeaderCellDef> UserName </th>
      <td mat-cell *matCellDef="let element"> {{element.username}} </td>
    </ng-container>
  
    <ng-container matColumnDef="email">
      <th mat-header-cell *matHeaderCellDef> Email </th>
      <td mat-cell *matCellDef="let element"> {{element.email}} </td>
    </ng-container>
  
    <ng-container matColumnDef="website">
      <th mat-header-cell *matHeaderCellDef> Website </th>
      <td mat-cell *matCellDef="let element"> {{element.website}} </td>
    </ng-container>
  
    <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
    <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
  </table>
  
</div>

Now once you have defined the column templates, you need to define the row templates. Add the following tr to the end of the table.

<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>

You have set the columnsToDisplay to the mat-row and mat-header-row. Here is how the complete app.component.html file looks:

<div class="container">
  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>
   
    <ng-container matColumnDef="username">
      <th mat-header-cell *matHeaderCellDef> UserName </th>
      <td mat-cell *matCellDef="let element"> {{element.username}} </td>
    </ng-container>
  
    <ng-container matColumnDef="email">
      <th mat-header-cell *matHeaderCellDef> Email </th>
      <td mat-cell *matCellDef="let element"> {{element.email}} </td>
    </ng-container>
  
    <ng-container matColumnDef="website">
      <th mat-header-cell *matHeaderCellDef> Website </th>
      <td mat-cell *matCellDef="let element"> {{element.website}} </td>
    </ng-container>
  
    <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
    <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
  </table>
  
</div>

Save the above changes and refresh the app. You will be able to see the API data displayed in the Angular Material table.

enter image description here

Source code from this tutorial is available at GitHub.