Angular Material Datatable With Angular 6 - Part One

Introduction

 

In this part of the article, we will learn about how to integrate Angular Material Datatable into an Angular 6 app with server-side Pagination, Filtering, and Sorting data. We will cover all the scenarios from the beginning so that beginners can implement and use Angular Material Datatable component in their applications.

 

What is Datatable?

 

A data table is a very flexible tool by which we can perform so many operations in an easy manner. Within the data table you can get so many options to manage the data with their features like pagination, sorting, and filtering.

 

In this article, I'm going to use Angular Material Datatable, which is the part of Material Design that performs various kinds of operations with the server-side data.

 

So let's implement DataTable with our Angular 6 application.

 

Installation

 

To use the Angular Material Data table component, we should install angular material dependencies by using the following npm command.

npm install --save @angular/material @angular/cdk @angular/animations

So, now we are ready to use Angular Material components in our application.

 

After that we should import all the dependencies into the module.ts file as described below. 

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

// To use material components
import { MatToolbarModule , MatMenuModule , MatInputModule , MatTableModule ,MatButtonModule,MatCardModule,MatTableDataSource,MatPaginatorModule,MatSortModule} from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// To use routing
import { routing } from './routes';
// To implement services
import { HttpModule }    from '@angular/http';
import { DataServiceService } from './service/data-service.service';
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    HttpModule,
    routing,
    BrowserAnimationsModule,
    BrowserModule,
    MatToolbarModule , MatMenuModule , MatInputModule , MatTableModule ,MatButtonModule,MatCardModule,MatPaginatorModule,MatSortModule
  ],
  exports:[
    MatToolbarModule , MatMenuModule , MatInputModule , MatTableModule ,MatButtonModule,MatCardModule,MatPaginatorModule,MatSortModule
  ],
  providers: [DataServiceService],
  bootstrap: [AppComponent]
})
export class AppModule { }

I have imported the different material components because we are going to use multiple Angular Material components in this article.

 

Now let's quickly set up the routing for our app. For that create the routes.ts file inside the app folder and paste the following code snippet.

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { CombinedComponent } from './combined/combined.component';
import { WithfilteringComponent } from './withfiltering/withfiltering.component';
import { WithpaginationComponent } from './withpagination/withpagination.component';
import { WithsortingComponent } from './withsorting/withsorting.component';
import { DefaultComponent } from './default/default.component';

const appRoutes: Routes = [
    { path: '', redirectTo: 'Default', pathMatch: 'full' },
    { path: 'Default', component: DefaultComponent },
    { path: 'WithPagination', component: WithpaginationComponent },
    { path: 'WithFiltering', component: WithfilteringComponent },
    { path: 'WithSorting', component: WithsortingComponent },
    { path: 'Combined', component: CombinedComponent }

];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

We have implemented the basic routing configuration, our next step is to configure the homepage for this article from where we can go to the different pages using routing.

 

Before that, let's configure our home page using the app.component.html file. Open the file and replace the following source code.

<mat-toolbar color="accent">
    <span>Manav Pandya - C#Corner</span>
    <span class="demo-toolbar"></span>
    <button mat-button href="www.asp-dotnet-mvc-tutorials.blogspot.in">Go To My Blog</button>
    <button mat-button [matMenuTriggerFor]="menu">Select Table From Below Menu</button>
    <mat-menu #menu="matMenu">
        <button [routerLink]="['/Default']" mat-menu-item>Default DataTable</button>
        <button [routerLink]="['/WithPagination']" mat-menu-item>Table With Pagination</button>
        <button [routerLink]="['/WithFiltering']" mat-menu-item>Table With Filtering</button>
        <button [routerLink]="['/WithSorting']" mat-menu-item>Table With Sorting</button>
        <button [routerLink]="['/Combined']" mat-menu-item>Combined DataTable</button>
    </mat-menu>
</mat-toolbar>

<router-outlet>
</router-outlet>

Here we have used <router-outlet> to load our routing parameters as defined in routes.ts .

 

Simple Datatable

 

Before implementing complex Datatable with different functionalities, we will implement a simple Datatable so that we get to know the difference between them.

 

For that, create a new component named default, where we will implement a simple material data table.

ng g c default

Open the default.component.html file and replace the following lines of source code.

<mat-card>
    <div class="alert alert-info">
        <strong>Simple Angular Material DataTable</strong>
    </div>
    <div class="example-container mat-elevation-z8">
        <mat-table #Table [dataSource]="MyDataSource">

            <!-- For ID -->
            <ng-container matColumnDef="id">
                <mat-header-cell *matHeaderCellDef> ID </mat-header-cell>
                <mat-cell *matCellDef="let post"> {{post.id}} </mat-cell>
            </ng-container>

            <!-- For User ID -->
            <ng-container matColumnDef="userId">
                <mat-header-cell *matHeaderCellDef> User ID </mat-header-cell>
                <mat-cell *matCellDef="let post"> {{post.userId}} </mat-cell>
            </ng-container>

            <!-- For Title -->
            <ng-container matColumnDef="title">
                <mat-header-cell *matHeaderCellDef> Title </mat-header-cell>
                <mat-cell *matCellDef="let post"> {{post.title}} </mat-cell>
            </ng-container>

            <!-- For Body -->
            <ng-container matColumnDef="body">
                <mat-header-cell *matHeaderCellDef> Body Text </mat-header-cell>
                <mat-cell *matCellDef="let post"> {{post.body}} </mat-cell>
            </ng-container>

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

Code Explanation

 

Here in this example, I have used different markup tags of material components, let's see the description about that. 

• <mat-table>
  It defines the material design data table, which is used to render the number of records using the data table. 
  
  
• <ng-container>
  ng-container is a directive, which acts as a structural directive. 
   
• <mat-header-cell>
  It defines the header text of a mat-table directive.
  
  
• <mat-cell>
  Used to print the value of a specific cell of a material table.
  
  
• <mat-header-row>
  It takes the array of values to act as data row template, that renders out table wise.
  
  
• <mat-row>
  It is used to show the content of the row for the data table.
  
  
• DataSource="MyDataSource"
  Datasource is the primary property, which is used to populate the data table with the data and the other operations like Pagination, Sorting, Searching and Filtering will completely depend on the data populated using DataSource property.

So far, we have implemented the simple data table page with the HTML required to create the data table.

 

Now, open the default.component.ts file and replace the give lines of source code. 

import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material';
import { DataServiceService } from '../service/data-service.service';
import { MatSort } from '@angular/material';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';

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

  MyDataSource: any;
  displayedColumns = ['id', 'userId','title','body'];

  constructor(public dataService: DataServiceService) { }

  ngOnInit() {
    this.RenderDataTable();
  }

  RenderDataTable() {
    this.dataService.GetAllRecords()
      .subscribe(
      res => {
        this.MyDataSource = new MatTableDataSource();
        this.MyDataSource.data = res;
        console.log(this.MyDataSource.data);
      },
      error => {
        console.log('There was an error while retrieving Posts !!!' + error);
      });
  }

}

As you can see that there is one method named RenderDataTable(), which is used to get the data from the service and populate the data table using DataSource property.

 

To get data, I'm using the free online REST service [Fake API data] and to know more about that, than just go through the following link. 

• Click here to know more about jsonplaceholder API

To populate our datatable we are using the service file named data-service.service.ts, create the service using given command.

ng g s /service/data-service

Open data-service.service.ts file and replace with the following source code.

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Observer } from 'rxjs/Observer';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/observable/throw';

@Injectable()
export class DataServiceService {

  private headers = new Headers({ 'Content-Type': 'application/json' });
  _baseUrl: string = '';

  // For Using Fake API by Using It's URL
  constructor(private http: Http) {
    this._baseUrl = "https://jsonplaceholder.typicode.com/";
  }

  // To fill the Datatable for Default Table [Dummy Data]
  public GetAllRecords() {
    return this.http.get(this._baseUrl + 'posts')
      .map((res: Response) => {
        return res.json();
      })
      .catch(this.handleError);
  }

  // To provide error description
  private handleError(error: Response | any) {
    console.error(error.message || error);
    return Observable.throw(error.status);
  }
}

For getting sample data im using https://jsonplaceholder.typicode.com/posts, which provides me the 100 records as a fake/dummy data.

 

This is how we have implemented a simple Material data table, now let's see the output. 

 

 

As you can see above our data populated inside the data table, but it's just a simple table with the list of 100 records, but the problem is that there are 100 records listed in the page. Instead we can use pagination to limit data to the specific number of results per page.

 

Data table With Pagination

 

Paging reduces our result to the chunks of results for the instance, and you can navigate forward or backward  using pagination.

 

For that, I'm going to create a component named with pagination by using the following command.

ng g c withpagination

Now open with pagination.component.html and paste snippet :

<mat-card>
    <div class="alert alert-info">
        <strong>Angular Material DataTable With Pagination</strong>
    </div>
    <div class="example-container mat-elevation-z8">
        <mat-table #Table [dataSource]="MyDataSource">

            <!-- For ID -->
            <ng-container matColumnDef="id">
                <mat-header-cell *matHeaderCellDef> ID </mat-header-cell>
                <mat-cell *matCellDef="let post"> {{post.id}} </mat-cell>
            </ng-container>

            <!-- For Album ID -->
            <ng-container matColumnDef="albumId">
                <mat-header-cell *matHeaderCellDef> Album ID </mat-header-cell>
                <mat-cell *matCellDef="let post"> {{post.albumId}} </mat-cell>
            </ng-container>

            <!-- For Title -->
            <ng-container matColumnDef="title">
                <mat-header-cell *matHeaderCellDef> Title </mat-header-cell>
                <mat-cell *matCellDef="let post"> {{post.title}} </mat-cell>
            </ng-container>

            <!-- For Image -->
            <ng-container matColumnDef="url">
                <mat-header-cell *matHeaderCellDef> Image </mat-header-cell>
                <mat-cell style="text-align: center;" *matCellDef="let post">
                    <img class="img-rounded" src={{post.url}}/>
                </mat-cell>
            </ng-container>

            <!-- For Thumbnail Photo -->
            <ng-container matColumnDef="thumbnailUrl">
                <mat-header-cell *matHeaderCellDef> Thumbnail </mat-header-cell>
                <mat-cell style="text-align: center;" *matCellDef="let post">
                    <img class="img-rounded" src={{post.thumbnailUrl}}/>
                </mat-cell>
            </ng-container>

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

        <!-- To use pagination in DataTable  -->

        <mat-paginator #paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 20]">
        </mat-paginator>
    </div>
</mat-card>

From the above code you can see that I have included a <mat-paginator> directive to use the pagination feature.

 

<mat-paginator> options are as follow,

• #paginator - trigger from component to define pagination within datatable
• [pageSize] - define how many rows will be displayed per page by default 
• [pageSizeOptions] - define how many rows you want to see at a time, you can change as per your requirement

Open the withpagination.component.ts file and paste the following code snippet.

import { Component, OnInit ,ViewChild} from '@angular/core';
import { MatTableDataSource , MatPaginator } from '@angular/material';
import { DataServiceService } from '../service/data-service.service';
import { MatSort } from '@angular/material';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';

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

  MyDataSource: any;
  displayedColumns = ['id', 'albumId','title','url','thumbnailUrl'];

  constructor(public dataService: DataServiceService) { }
  @ViewChild(MatPaginator) paginator: MatPaginator;

  ngOnInit() {
    this.RenderDataTable();
  }

  RenderDataTable() {
    this.dataService.GetAllPhotos()
      .subscribe(
      res => {
        this.MyDataSource = new MatTableDataSource();
        this.MyDataSource.data = res;
        this.MyDataSource.paginator = this.paginator;
        console.log(this.MyDataSource.data);
      },
      error => {
        console.log('There was an error while retrieving Photos !!!' + error);
      });
  }
}

Code explanation

 

For pagination, I have used @ViewChild(MatPaginator), that indicates we have used the functionality of a material design MatPaginator by creating an object paginator.

 

And that I have referenced object to MyDataSource property like this:

this.MyDataSource.paginator= this.paginator // which is the view child paginator object

For populating this datatable, I've used the URL https://jsonplaceholder.typicode.com/albums/1/photos

 

Open the data-service.service.ts file and add the following method to get all the photos from the API.

// To fill the Datatable with Photos [Dummy Data]
 public GetAllPhotos() {
   return this.http.get(this._baseUrl + 'albums/1/photos')
     .map((res: Response) => {
       return res.json();
     })
     .catch(this.handleError);
 }

When you execute the app, the output will be something like this.

 

 

Datatable with Sorting 

 

Sorting is the important part, which is mainly used to simplify the data in either ascending or descending order 

 

To use Sorting in the Angular app using Material Datatable, we should include the paginator into the module file like this.

import { MatSort } from '@angular/material';

Now let's create the new component by using ng command.

ng g c withsorting

Open withsorting.component.html file and paste,

<mat-card>
    <div class="alert alert-info">
        <strong>Angular Material DataTable With Sorting</strong>
    </div>
    <div class="example-container mat-elevation-z8">
        <mat-table #Table [dataSource]="MyDataSource" matSort>

            <!-- For ID -->
            <ng-container matColumnDef="id">
                <mat-header-cell *matHeaderCellDef mat-sort-header> ID </mat-header-cell>
                <mat-cell *matCellDef="let post"> {{post.id}} </mat-cell>
            </ng-container>

            <!-- For Post ID -->
            <ng-container matColumnDef="userId">
                <mat-header-cell *matHeaderCellDef mat-sort-header> User ID </mat-header-cell>
                <mat-cell *matCellDef="let post"> {{post.userId}} </mat-cell>
            </ng-container>

            <!-- For Name -->
            <ng-container matColumnDef="title">
                <mat-header-cell *matHeaderCellDef mat-sort-header> Title </mat-header-cell>
                <mat-cell *matCellDef="let post"> {{post.title}} </mat-cell>
            </ng-container>

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

        <!-- To paginate between pages with search -->
        <mat-paginator #paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 20]">
        </mat-paginator>
    </div>
</mat-card>

As you've noticed, there are two terms regarding the sorting,

• matSort - it defines that the datatable is sortable 
• mat-sort-header - this term is used to indicate that every column is identically listening for sorting changes 

Open withsorting.component.ts file and paste the following lines of source code.

import { Component, OnInit ,ViewChild} from '@angular/core';
import { MatTableDataSource,MatPaginator,MatSort } from '@angular/material';
import { DataServiceService } from '../service/data-service.service';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';

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

  MyDataSource: any;
  displayedColumns = ['id', 'userId','title'];
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor(public dataService: DataServiceService) { }

  ngOnInit() {
    this.RenderDataTable();
  }

  RenderDataTable() {
    this.dataService.GetAllAlbums()
      .subscribe(
      res => {
        this.MyDataSource = new MatTableDataSource();
        this.MyDataSource.data = res;
        this.MyDataSource.sort = this.sort;
        this.MyDataSource.paginator = this.paginator;
        console.log(this.MyDataSource.data);
      },
      error => {
        console.log('There was an error while retrieving Albums !!!' + error);
      });
  }

}

Code explanation

 

For sorting, I have used @ViewChild(MatSort), that indicates we have used the functionality of a material design MatSort by creating object sort.

 

And for that, I have the referenced object to MyDataSource property like this.

this.MyDataSource.sort = this.sort // which is viewchild sorting object

For populating the data, I'm going to use the API URL  https://jsonplaceholder.typicode.com/albums

 

Now open the data-service.service.ts and add the following method.

// To fill the Datatable with Albums [Dummy Data]
  public GetAllAlbums() {
    return this.http.get(this._baseUrl + 'albums')
      .map((res: Response) => {
        return res.json();
      })
      .catch(this.handleError);
  }

We have implemented sorting functionality with Datatable, execute the app and you can see the output like this.

 

 

As you can see my data are populated and the data table is sorted with the descending order.

 

Conclusion 

 

In this part of the article, we have integrated three types of different operations using Angular Material Datatable which are listed below.

• Simple Datatable Integration
• Data table with Pagination
• Data table with Sorting 

Further, we will expand our datatable by adding more features like searching, and the combined example of Angular material datatable with all possible features. Until then stay tuned and keep learning.