Mat Table Angular

Mat Table in Angular

Mat table is used to display data . its a material designed styled data-table . For using Material Table MatTableModule need to install/add in project.

import {MatTableModule} form '@angular/material'


For using this you need to install Angular Material

ng add @angular/material

C:\AngularService\myservice> ng add @angular/material

Installing packages for tooling via npm.
Installed packages for tooling via npm.
? Choose a prebuilt theme name, or "custom" for a custom theme: Purple/Green     
[ Preview: https://material.angular.io?theme=purple-green
]
? Set up HammerJS for gesture recognition? (Y/n) n

You Can Choose any Theme

And you can add/remove HammerJS also

Set up browser animations for Angular Material? (Y/n) Y

App.Module.ts

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

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

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

import { EmpserviceService } from './empservice.service';

import { MycomComponent } from './mycom/mycom.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import {MatTableModule} from '@angular/material/table';

import { EmpdetailsComponent } from './empdetails/empdetails.component'

@NgModule({

  declarations: [

    AppComponent,

    MycomComponent,

    EmpdetailsComponent

  ],

  imports: [

    BrowserModule,

    HttpClientModule,

    BrowserAnimationsModule,

    MatTableModule

  ],

  providers: [HttpClientModule,EmpserviceService],

  bootstrap: [AppComponent]

})

export class AppModule { }

App.Component.Html

<h1 align = "center">Mat Table in Angular</h1>

<h3 align = "center">Shubh Techno Expert </h3>

<h3 align = "center">http://xafdeveloper.blogspot.com </h3>

<h3 align = "center">http://ShubhTechnoExpert.blogspot.com </h3>

<button type = "button" (click) ="GetEmpDetails()"  align ="Center"  >Click Me To Display Data</button>

<br>

<div align = "center" >

    <table mat-table [dataSource]="dataSource" border ="3"  >

    

        <ng-container matColumnDef="EmpName" >

            <th  mat-header-cell *matHeaderCellDef >Employee Name</th>

            <td mat-cell *matCellDef="let item">{{item.EmpName}}</td>

        </ng-container>

        <ng-container matColumnDef="EMPCode">

            <th  mat-header-cell *matHeaderCellDef >Employee Code</th>

            <td mat-cell *matCellDef="let item">{{item.EMPCode}}</td>

        </ng-container>

    

        <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>

        <tr mat-row *matRowDef="let row; columns: columnsToDisplay"></tr>

    

    </table>

    </div>

app.component.ts 

import { Component } from '@angular/core';

import {EmpserviceService} from './empservice.service'

import {MatTableModule,MatTableDataSource} from '@angular/material/table';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

dataSource = new MatTableDataSource();

columnsToDisplay = ['EmpName', 'EMPCode'];

constructor(private _EmpserviceService:EmpserviceService){}

  GetEmpDetails(){

  this._EmpserviceService.GetEmployeDetails().subscribe((respp)=>

  {    

     this.dataSource.data = respp;

  })

}

}

Follow us on youtube Shubh Techno Expert 
please subscribe .