Angular.js Migration Table

Angular Material data tables give a fast and effective way to create tables of data with common features like pagination. The pre requirements to use Angular Material Table are:

  • You should have some knowledge about TypeScript and Angular

  • You should have Node.js and npm installed in your system

  • Angular CLI 10 installed on your system

  • Angular 10 project 

  • Some data to display in the data table.

First step is to set up Angular Material. Create a project using Angular CLI 10. Use ng add command to set up Angular 8 in your project. 

$ cd your_angular_project
$ ng add @angular/material
Second step is to import the Angular Material Data Table module. Import the Material Table module in the app.module.ts file. Now open the src/app.module.ts file in which the main application module is present. Add the following code.
import { BrowserModule } from  '@angular/platform-browser';
import { NgModule } from  '@angular/core';
import {MatTableModule} from '@angular/material/table';
import { AppComponent } from  './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MatTableModule       
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
First we import MatTableModule from @angular/material package and add this Module into the imports array of the application module. Now use Material table components to create Material tables in your application. We are going to create a Material Table with and provide a data source. For that we open the src/app/app.component.html template and add the component to create the table. A data source from where the table can get the data is provided. This is done by using the dataSource property. Before providing a data source, define the table’s columns. Suppose you want to add the following columns to your table: Insurance Policy Number, Policy Creation Date, Policy Expire Date, Policy Amount, Client Id, Employee Id. Here each definition should have three elements: a unique name, a header cell, one or multiple row cells. Inside the component we add the below lines of code for creating a column for insurance policy number. matcolumndef="policyNumber"> Policy Number Here we use the component to create a column definition. Inside header and row cells are defined using and components. The unique name column is defined by matColumndef property. Open src app/app.components.ts file,add a variable that will be used to hold the name of the columns.
tableColumns  :  string[] = ['policyNumber', 'creationDate', 'expireDate', 'policyAmount', 'clientId', 'employeeId'];
Next step is to define the material table’s rows. To define it include and components inside your table and give the tableColumns array which holds the columns list. In the src/app/app.component.html file add the following lines of code inside the component. matHeaderDef is used to give a configuration object for table header row. matRowDef is used to provide a configuration for row cells. Finally add data to your material table. First you need to provide a data source. Open src/app/app.component.ts file and add a dataSource array to the component.
dataSource  = [];
You already have DataService that provides your application with data from the Rest API back-end and policy model that encapsulates an insurance policy type. In src/app/app.component.ts file add the following imports.
import { DataService } from  "./data.service";
import { Policy } from  "./policy";

Inject DataService as dataService instance through component’s constructor.

constructor(private  dataService:  DataService) {}
In the ngOnInit life-cycle event of Angular component,call .getPolicies method and subscribe to returned Observable: 
ngOnInit() {
  this.dataService.getPolicies().subscribe((result)=>{    
    this.dataSource  =  result.body;
  })
}