Angular Material Table Example
In this post you will learn how to create angular material table with multiple examples . How we can fetch data from a RESTapi and display the data in the table , how to filter table data , how to add pagination in angular material table .
Basic syntax
1. Define table and add data to the table
<table mat-table [dataSource]="dataSource"></table> public dataSource = [
{ index: 1, name: 'John', grade: 1 },
{ index: 2, name: 'Kavin', grade: 4 },
{ index: 3, name: 'Luman', grade: 6 },
{ index: 4, name: 'Jeff', grade: 9 },
]To create table we use table html element and mat-table provides material design to the table , we pass a array of object to the dataSource input , the table will take the array and display the row for each object on the array.
2. Define the column
<ng-container matColumnDef="index">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.index}} </td>
</ng-container>ng-container element will not get render to the DOM but it will provide an element to apply the matColumnDef directive.matColumnDef directive identifies a column with a key. for example here the key is "index" . In the ng-container element we have all the column configuration. For column header we use *matHeaderCellDef structural directive and for column data we are using *matCellDef structural directive. These two structural directives are not applying any style to the data table , mat-header-cell and mat-cell both the directives are responsible to apply the style to the table.
Column header are static text , but cell data we are getting access for each row of the datasource. *matCellDef="let element" element is the reference of the row and by using the element we have access any column of the row.
3. Define the row
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>to define the header of the table we use mat-header-row directive and by using *matHeaderRowDef directive we define which are the columns will be displayed in the table header , here displayedColumns is array of columns.
public displayedColumns: string[] = ['index', 'name', 'grade']; To display the rows we use <tr> element mat-row directive , with the *matRowDef structural directive we have a variable row which contains the data of a row ,and columns which contains the order in which data cell should be rendered .
Angular material table example
STEP 1 - install @angular/cli in your system
If @angular/cli is not installed in your system then first install angular/cli .Open the command prompt or terminal and run the below command to install @angular/cli
npm install -g @angular/cliSTEP 2 - Create new angular project
Open the command prompt or terminal and run the below command , this command will create new angular project
STEP 3 - Install the Angular Material Package
Install the Angular Material package by running below command
Import MatTableModule form @angular/material/table.
src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatTableModule} from '@angular/material/table';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatTableModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
src/app/app.component.ts
import { Component } from '@angular/core';
export interface Data {
name: string;
index: number;
grade: number;
}
const STUDENT_DATA: Data[] = [
{ index: 1, name: 'John', grade: 1 },
{ index: 2, name: 'Kavin', grade: 4 },
{ index: 3, name: 'Luman', grade: 6 },
{ index: 4, name: 'Jeff', grade: 9 },
{ index: 5, name: 'Ukon', grade: 1 },
{ index: 6, name: 'Lilo', grade: 17 },
{ index: 7, name: 'Falcon', grade: 1 },
{ index: 8, name: 'Elon', grade: 14 },
{ index: 9, name: 'Steve', grade: 14 },
];
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
displayedColumns: string[] = ['index', 'name', 'grade'];
dataSource = STUDENT_DATA;
}
src/app/app.component.html
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Index Column -->
<ng-container matColumnDef="index">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.index}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Grade Column -->
<ng-container matColumnDef="grade">
<th mat-header-cell *matHeaderCellDef> Grade </th>
<td mat-cell *matCellDef="let element"> {{element.grade}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
src/app/app.component.css
table {
width: 100%;
}
Angular material table example Display data from RESTapi
Create a service
Create a service by using below command
ng generate service UserServiceServicesrc/app/user-service.service.ts
In the service i have used User data RESTapi from jsonplaceholder.com
import { Injectable } from '@angular/core';
import {HttpClient} from "@angular/common/http";
@Injectable({
providedIn: 'root'
})
export class UserServiceService {
public URL = "https://jsonplaceholder.typicode.com/users";
constructor(private http:HttpClient) { }
public getAllUsers(){
return this.http.get(this.URL);
}
}
src/app/app.module.ts
Register providers: [UserServiceService] in the providers array .
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatTableModule} from '@angular/material/table';
import { HttpClientModule } from '@angular/common/http';
import { UserServiceService } from './user-service.service';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatTableModule,
HttpClientModule
],
providers: [UserServiceService],
bootstrap: [AppComponent]
})
export class AppModule { }
src/app/app.component.html
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- id Column -->
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef> ID </th>
<td mat-cell *matCellDef="let element"> {{element.id}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Username Column -->
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef> Username </th>
<td mat-cell *matCellDef="let element"> {{element.username}} </td>
</ng-container>
<!-- Email Column -->
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef> Email </th>
<td mat-cell *matCellDef="let element"> {{element.email}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
src/app/app.component.ts
Create instance of the userService in the component and use the getAllUsers() method to get the users data.
import { Component, OnInit } from '@angular/core';
import { UserServiceService } from './user-service.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit{
public dataSource:any;
public displayedColumns: string[] = ['id', 'name', 'username','email'];
constructor(
private userService : UserServiceService,
){}
ngOnInit(){
this.getUsers();
}
public getUsers(){
this.userService.getAllUsers().subscribe(userData=>{
this.dataSource=userData;
})
}
}
src/app/app.component.css
table {
width: 100%;
}
I hope this article is helpful for you , i am very glad to help you thanks for reading
