material+pagination+filter+sort

 

1) ng add @angular/material

Table

1)module.ts ->,MatTableModule,

 

2)ts->

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

 

here student is class we need to import

 students: Student[] = [];

 

displayedColumns: string[] = ['studentId',  'studentName' ,'address'  ,'dateofjoin',  'dateofrelease',  'Edit'  ,'Delete'];

 

 dataSource = new MatTableDataSource<Student>(this.students);

 

this.dataSource.data = data ;

 // "./node_modules/@angular/material/prebuilt-themes/purple-green.css",

 

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

 

 

Icon

import {MatIconModule} from '@angular/material/icon';

 <button mat-icon-button style="color: green;"    (click)="EditStudent(element.studentId)"><mat-icon>launch</mat-icon></button>

        <button mat-icon-button style="color: red;"   (click)="deleteStudent(element.studentId)" ><mat-icon>delete_outline</mat-icon></button>

       

 

Sort

Module

---

import {MatSortModule} from '@angular/material/sort';

ts

---=-

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

 

@ViewChild(MatSort)sort!: MatSort;

/*function to load all student data*/

loadStudentList() {

  this.studentService.getAllStudentsList().subscribe(data => {

    // this.students = data;

    this.dataSource.data = data ;

    this.dataSource.sort = this.sort;

  } ,error => {

    if(error == 401){

    console.log("not authorize");

    }

    console.log(error);

});

 }

 

 

 

Html

  <table mat-table [dataSource]="dataSource" matSort >

 

<th mat-header-cell *matHeaderCellDef mat-sort-header> StudentId </th>

 

 

 

Pagination

import {MatPaginatorModule} from '@angular/material/paginator';

 

ts

import { MatPaginator } from '@angular/material/paginator';

 

 @ViewChild(MatPaginator) paginator!:MatPaginator;

 

loadStudentList() {

loadStudentList() {

  this.studentService.getAllStudentsList().subscribe(data => {

    // this.students = data;

    this.dataSource.data = data ;

    this.dataSource.sort = this.sort;

    this.dataSource.paginator = this.paginator;

 

 }

 

 

Html

-----------------------------

<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" [pageSize]="5" showFirstLastButtons></mat-paginator>

 

 

 

 

 

Filter

1)in module.ts

import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from "@angular/material/form-field";

@NgModule({
    imports: [
        MatFormFieldModule,
        MatInputModule
    ]
})
export class AppModule { }

Add formsmodule,reactiveforms module

 

2)in html

<div class="search-div">
	<mat-form-field class="search-form-field" floatLabel="never">
	<input matInput [(ngModel)]="searchKey" placeholder="Search" autocomplete="off" (keyup)="applyFilter()">
	<button mat-button matSuffix mat-icon-button aria-label="Clear"*ngIf="searchKey"  (click)="onSearchClear()">
	<mat-icon>close</mat-icon>
	</button>
	</mat-form-field>
	</div>

3) In ts

-------

searchKey: string;

onSearchClear() {
	this.searchKey = "";
	this.applyFilter();
	}
	applyFilter() {
	this.listData.filter = this.searchKey.trim().toLowerCase();
	}

 

Css

------ 

  /* filter controls */

.search-div{

  margin: 10px;

    }

    .search-form-field{

        width: 60%;

        margin-left: 10px;

        padding: 5px 10px;

        background-color: #f5f5f5;

        border-radius: 5px;

        }

        .search-form-field div.mat-form-field-underline {

            display: none;

        }

        .search-form-field div.mat-form-field-infix{

            border-top: 0px;

        }

        .search-form-field div.mat-form-field-wrapper{

          padding-bottom: 0px;

      }

      .search-form-field div.mat-form-field-suffix button{

          height: 32px;

          width: 32px;

      }

 

https://github.com/CodAffection/Angular-Material-Data-Table-Paging-Sorting-Filtering/blob/master/CompleteAngularMaterialApp/src/app/app.module.ts