import { Student } from './../../shared/student' ; import { ApiService } from './../../shared/api.service' ; import { Component , ViewChild , OnInit } from '@angular/core' ; import { MatPaginator } from '@angular/material/paginator' ; import { MatTableDataSource } from '@angular/material/table' ; @ Component ( { selector : 'app-students-list' , templateUrl : './students-list.component.html' , styleUrls : [ './students-list.component.css' ] } ) export class StudentsListComponent implements OnInit { StudentData : any = [ ] ; dataSource : MatTableDataSource < Student > ; @ ViewChild ( MatPaginator , { static : false } ) paginator : MatPaginator ; displayedColumns : string [ ] = [ '_id' , 'student_name' , 'student_email' , 'section' , 'action' ] ; constructor ( private studentApi ) { this . studentApi . GetStudents ( ) . subscribe ( data => { this . StudentData = data ; this . dataSource = new MatTableDataSource < Student > ( this . StudentData ) ; setTimeout ( ( ) => { this . dataSource . paginator = this . paginator ; } , 0 ) ; } ) ; } ngOnInit ( ) { } deleteStudent ( index , e ) { if ( window . confirm ( 'Are you sure' ) ) { const data = this . dataSource . data ; data . splice ( ( this . paginator . pageIndex * this . paginator . pageSize ) + index , 1 ) ; this . dataSource . data = data ; this . studentApi . DeleteStudent ( e . _id ) . subscribe ( ) ; } } }