Displaying Data using Angular 12 Material Tables

Aug 12, 2021


This tutorial will teach you how to display data in Angular Material tables. We’ll build a complete project for displaying data on the Angular Material table.


To follow along with this tutorial, you are required to have:

  • Some background knowledge on Angular. In this tutorial, we’ll be using Angular 12.
  • Knowledge on using Angular Material. It will help you get started quicker.
  • An Angular project created on your machine.

Getting started with Angular Material

In this section, I’ll show you how to set up your Angular project to use Angular Material.

In your project root, open the terminal and run the following commands:

ng add @angular/material

This command will prompt for a yes/no question as shown below:

# installation starts
✔ Found compatible package version: @angular/material@12.1.3.
# ..................
Would you like to proceed? (Y/n) 

Enter y to proceed with the Angular Material installation. This will install all packages required for Material.

Material Installation

Now that we’ve successfully installed Material, let’s now import the material modules into our project.

Create a new file src/app/app.material-module.ts and add the following code:

import {NgModule} from '@angular/core';
import {MatTableModule} from '@angular/material/table';
import {MatPaginatorModule} from '@angular/material/paginator';
import {MatInputModule} from '@angular/material/input';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {MatSortModule} from '@angular/material/sort';

// since we're exporting these modules, add them to export
    exports: [
export class AppMaterialModule {}

In the module above, we’ve imported the Material modules from @angular/material/*. We will then export all these modules since we’ll be using them in our main module (app.module.ts).

Open your app.module.ts file and import the AppMaterialModule in the imports array:

// ..........................
import { AppMaterialModule } from "./app.material-module";

  declarations: [
    // ....
  imports: [
    // .........

  // ...
export class AppModule { }

We’ve updated our app.module.ts by importing the AppMaterialModule module to expose the Material modules we had imported.

Using material table to display data

In this section, I’ll show you how to create the Material table to display some students information. The table will comprise basic student details such as names and registrations.

Let’s start by creating the details interface.

Run the following commands on your project root to create the student interface:

ng g i student

This will create an interface in the app/student.ts file.

Proceed and edit it to look as follows:

export interface Student {
  yearOfStudy: bigint;

Create an src/assets/students.json file and define the student details that we will use in our table.

    "firstName": "John",
    "lastName": "Doe",
    "studentEmail": "johndoe@example.com",
    "course": "Bsc Software Engineering",
    "yearOfStudy": 2
    "firstName": "Test2",
    "lastName": "Test2",
    "studentEmail": "test@example.com",
    "course": "Bsc Computer Science",
    "yearOfStudy": 4

Then define the baseURL in /src/environments/environment.ts as an environment variable.

// ...

export const environment = {
  // ...

// ...

Create an api service by running the following command:

ng g s api

Then update it as follows:

// ...
//import student interface
import {Student} from "../student";
//import this to make http requests
import {HttpClient} from "@angular/common/http";
import {Observable} from "rxjs";
//we've defined our base url here in the env
import {environment} from "../../environments/environment";
// ....
//class apiService
export class ApiService {

  constructor(private httpClient: HttpClient) { }

   * This method returns students details
  getStudentsInformation(): Observable<Student[]>{
    return this.httpClient.get<Student[]>(`${environment.baseURL}student.json`);

Now that we’ve got the logic to get data from our API, let’s proceed and add it to the controller.

First, let’s update our app.module.ts file as follows:

// ...

import { HttpClientModule} from "@angular/common/http";

  declarations: [
    // ...
  imports: [
    // ...
    HttpClientModule, //endsure your import this module
  // ...
// ...

Then update the app.component.ts contents as shown below:

// ...
import {Component, OnInit} from '@angular/core';
import {MatTableDataSource} from "@angular/material/table";
import {Student} from "./student";
import {ApiService} from "./services/api.service";

  // ...

export class AppComponent implements OnInit{

  student: Student[] = [];
  // columns we will show on the table
  public displayedColumns = ['firstName', 'lastName', 'studentEmail', 'yearOfStudy', 'registrationNumber', 'course' ];
  //the source where we will get the data
  public dataSource = new MatTableDataSource<Student>();

  //dependency injection
  constructor(private studentApiService: ApiService) {

    //call this method on component load
   * This method returns students details
        this.dataSource.data = res;

At this point, you can now test your application by logging your API response observable output using the steps below:

  1. Serve your application by running ng serve --port 3000.
  2. Go to your browser and open the new tab and enter localhost:3000.
  3. Ctrl + Shift + I to go to the logs.

You will see the following output if you followed the steps above correctly:


first console output

second console output

Now let’s update our app.component.html as shown below to display our data.

<table mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="firstName">
    <th mat-header-cell *matHeaderCellDef> First Name </th>
    <td mat-cell *matCellDef="let element"> {{element.firstName}} </td>

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

  <ng-container matColumnDef="studentEmail">
    <th mat-header-cell *matHeaderCellDef> Student Email </th>
    <td mat-cell *matCellDef="let element"> {{element.studentEmail }} </td>
  <ng-container matColumnDef="registrationNumber">
    <th mat-header-cell *matHeaderCellDef> Registration Number </th>
    <td mat-cell *matCellDef="let element"> {{element.registrationNumber}} </td>

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

  <ng-container matColumnDef="yearOfStudy">
    <th mat-header-cell *matHeaderCellDef> Year Of Study </th>
    <td mat-cell *matCellDef="let element"> {{element.yearOfStudy}} </td>

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

Then open your app.component.css file and add the following CSS code:

table {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  min-width: 500px;
th.mat-header-cell {
  text-align: left;
  max-width: 300px;

You should now see the following table:



In this tutorial, we’ve discussed Angular Material tables. We saw how we can use Angular material table to display data.

I hope this article builds a firm foundation for you to use the Angular Material tables. From there, you can then sort or add other features to your tables.

You can find the code in this tutorial on this Replit. The Replit only includes the project’s src directory.

Happy coding!

Try Launching a Free Project in CloudFlow Today!


How to Create a Reusable React Form component

How to Create a Reusable React Form component

Prerequisites In this tutorial, one ought to have the following: Basic React and Javascript knowledge. Understanding of npm and how to install from npm Atom or Visual studio code and npm installed on a pc. Goal To create a reusable form which can...

read more
Working with Bash Arrays

Working with Bash Arrays

As a programmer, you may have come across or used the command line when building a tool, or for scripting. Bash is one of the most common command-line interpreters used for writing scripts. You can create variables, run for loops, work with arrays,...

read more