Angular Material Table Example

Updated February 15, 2023

Introduction to Angular Material Table Example

The angular material table example provides the design style of the material data table used to display the data rows. The angular material table will build on the foundation of the data table CDK. It will use similar interfaces that use data templates and input, except the selector attributes and elements are predefined with mat instead of using CDK. It is beneficial and essential in AngularJS.

How to Create Angular Material Table?

• The angular directive of the mat table is used to create the table using material design. Therefore, we can say that the material data component is a generic component used to display tabulated data.
• When needed, we can use a data table of angular material as an alternative to UI design. An alternative approach for providing data in AngularJS is passing an absolute stream that emits a data array rendered each time it is changed. The table will listen by the stream, automatically triggering an updated row when a new data array is emitted.

The below steps show how we are creating an angular material table.

Below we are creating the project of the angular material table. First, we need to install angular material CLI in our system to configure the angular material table project.

1. Below, we install the angular material CLI on the ubuntu system. In the below example, we install angular CLI using the npm command.

Code:

npm install -g @angular/cli

Output:

2. In the example below, we are creating a new project name, angular-material-table; at the time of this project, we are defining routing as yes and the style sheet format as yes.

Code:

ng new angular-material-table

Output:

3. We are installing the below packages used when developing the application. This package is used to import the module into our application. We are installing these packages by using the npm command as follows.

Code:

npm install @angular/material –save

Output:

4. Now, we are adding the library files to our project. We are adding the library as follows.

Code:

cd angular-material-table/
ng add @angular/material

Output:

5. Now, we are modifying the app.module.ts file and adding the code below. We are importing multiple modules in it as follows.

Code:

import { BrowserModule } from '@angular/platform-browser';
…..
@NgModule ({
declarations: [
AppComponent
],
Imports : [
BrowserModule,
BrowserAnimationsModule,
MatTableModule,
FormsModule,
ReactiveFormsModule
],
Providers : [],
Bootstrap : [AppComponent]
})
export class AppModule { }

Output:

6. Now, we are modifying the html host file name as app.component.html as follows.

Code:

<table mat-table [dataSource] = "dataSource" class = "mat-elevation-z8">
 <ng-container matColumnDef = "No">
   <th mat-header-cell *matHeaderCellDef> No </th>
   <td mat-cell *matCellDef = "let element"> {{element.No}} </td>
</ng-container>
<ng-container matColumnDef = "First Name">
  <th mat-header-cell *matHeaderCellDef>First Name</th>
  <td mat-cell *matCellDef = "let element"> {{element.First Name}} </td>
</ng-container>
<ng-container matColumnDef = "Last Name">
  <th mat-header-cell *matHeaderCellDef>Last Name</th>
  <td mat-cell *matCellDef = "let element"> {{element.Last Name}} </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>
  <tr mat-header-row *matHeaderRowDef = "displayedColumns"></tr>
  <tr mat-row *matRowDef = "let row; column: displayedColumns;"></tr>
</table>

Output:

7. Now, we add the following code into the app.component.ts file and run the project to display the output.

Code:

import {Component, Injectable} from '@angular/core';
import {Sort} from '@angular/material';
export interface stud {
  No: number;
  First Name: string;
  Last Name: string;
  Email: string;
}
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
} )
export class AppComponent {
dataSource: Food[] = [
{No: 1, First Name: 'John', Last Name: 'Doe', Email: '[email protected]'},
{No: 1, First Name: 'Mike', Last Name: 'Hussey', Email: '[email protected]'},
];
displayedColumns: string[] = ['No', 'First Name', 'Last Name', 'Email'];
}

Output:

Examples of Angular Material Data Table

The below example shows the angular material data table.

• In the below example, we first create a new project name angular-material-tableexample; when creating the angular material data table project, we are using routing as yes and the style sheet yes.

Code:

ng new angular-material-tableexample

Output:

• Now we are adding the library files to our project. We are adding the library as follows. First, we use the ng add command to add the library to the project. Next, we choose a pre-built theme name as custom; this is a default theme used when adding the library to our project. Also, we are setting the global angular material typography style as yes. Finally, we are defining angular material browser animations as yes as follows.

Code:

cd angular-material-tableexample/
ng add @angular/material

Output:

• Now in the below code, we are modifying the app.module.ts file. We import the browser, ng, app component, browser animation, mat table, and forms modules. The mat input module contains the directive and component, which we are adding to the design component of the material. The mat table module is the core data table module that includes the mat-table component. Finally, the mat pagination module is a general module of pagination used to paginate the data.

Code:

import { BrowserModule } from '@angular/platform-browser';
…..
@NgModule ({
……….
],
Imports : [
……..
],
Providers : [],
Bootstrap : [AppComponent]
})
export class AppModule { }

Output:

• In the example below, we are modifying the app.component.html file as follows. We are adding the data structure of the table in this file. This file contains the data source of the table.

Code:

<table mat-table [dataSource] = "dataSource" class = "mat-elevation-z8">
…….
</table>

Output:

• We are adding the code below into the app.component.ts file and running the example.

Code:

import {Component, Injectable} from '@angular/core';
displayedColumns: string[] = ['No', 'First Name'];
……..
}

Output:

Conclusion

We can say that the material data component is a generic component used to display tabulated data. The angular material table example provides the design style of the material data table used to display the data rows.

Recommended Articles

This is a guide to Angular Material Table Example. Here we discuss the introduction and how to create an angular material table with examples. You may also have a look at the following articles to learn more –

1. Angular Material Overlay
2. Angular Material NPM
3. Angular material radio button
4. Angular material slider