Angular 9 - Angular Material mat-paginator is not working

Question

I am using angular material for paginator. But it is not working. I googled and tried many things but it is not working. This is my component.html

<kt-portlet>
    <kt-portlet-header [class]="'card-head-lg'" >
        <ng-container ktPortletTitle>
            <span>Subjects list</span>
        </ng-container>

        <ng-container ktPortletTools>
            <button (click)="addSubject()"  mat-raised-button matTooltip="Create new subject" color="primary"
                type="button">
                <span>New Subject</span>
            </button>
        </ng-container>
    </kt-portlet-header>

    <kt-portlet-body>
        <div class="form mb-3">
            <div>
                <div class="row align-items-center">

                    <div class="col-md-4 kt-margin-bottom-10-mobile">
                        <label>Search:</label>
                        <mat-form-field class="mat-form-field-fluid" appearance="outline">
                            <input matInput  [(ngModel)]="searchKey"  (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>

                </div>
            </div>
        
            <div class="row align-items-center collapse form-group-actions kt-margin-top-20 kt-margin-bottom-20"
                [ngClass]="{'show' : selection.selected.length > 0}">
                <div class="col-xl-12">
                    <div class="form-group form-group-inline">
                        <div class="form-label form-label-no-wrap">
                            <label class="font-bold font-danger">
                                <span>Records selected:</span>
                                {{ selection.selected.length }}
                            </label>
                        </div>
                        <div>
                            <ng-container>
                                <button (click)="deleteSubjects()" mat-raised-button color="warn"
                                    matTooltip="Delete selected subjects" class="mat-button-mt-4">
                                    <mat-icon>delete</mat-icon>
                                    Delete All
                                </button>&nbsp;
                            </ng-container>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mat-table-wrapper" [hidden]="loading">
            <mat-table class="lmat-elevation-z8" #table [dataSource]="dataSource" matSort #sort1="matSort"
                matSortActive="id" matSortDirection="asc" matSortDisableClear>
                <ng-container matColumnDef="select">
                    <mat-header-cell *matHeaderCellDef class="mat-column-checkbox">
                        <mat-checkbox (change)="$event ? masterToggle() : null"
                            [checked]="selection.hasValue() && isAllSelected()"
                            [indeterminate]="selection.hasValue() && !isAllSelected()" [color]="'primary'">
                        </mat-checkbox>
                    </mat-header-cell>
                    <mat-cell *matCellDef="let row" class="mat-column-checkbox">
                        <mat-checkbox (click)="$event.stopPropagation()"
                            (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)"
                            [color]="'primary'">
                        </mat-checkbox>
                    </mat-cell>
                </ng-container>

                <ng-container matColumnDef="name">
                    <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
                    <mat-cell *matCellDef="let element">{{element.name}}</mat-cell>
                  </ng-container>
              
                  <ng-container matColumnDef="description">
                    <mat-header-cell *matHeaderCellDef mat-sort-header>Description</mat-header-cell>
                    <mat-cell *matCellDef="let element">{{element.description}}</mat-cell>
                  </ng-container>

                  <ng-container matColumnDef="status">
                    <mat-header-cell *matHeaderCellDef mat-sort-header>Status</mat-header-cell>
                    <mat-cell *matCellDef="let subject">
                        <span
                            class="label label-lg label-light-{{ getItemCssClassByStatus(subject.status) }} label-inline">{{  getItemStatusString(subject.status) }}</span>
                    </mat-cell>
                </ng-container>

                <ng-container matColumnDef="actions">
                    <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
                    <mat-cell *matCellDef="let element">
                        <ng-container>
                            
                            <button (click)="editSubject(element)" mat-icon-button color="primary" matTooltip="Edit subject"
                                >
                                <mat-icon>create</mat-icon>
                            </button>&nbsp;
                        </ng-container>

                        <ng-container>
                            <button (click)="deleteSubject(element.id)" mat-icon-button color="warn" matTooltip="Delete subject" type="button"
                                >
                                <mat-icon>delete</mat-icon>
                            </button>&nbsp;
                        </ng-container>

                    </mat-cell>
                </ng-container>

                <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

                <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
            </mat-table>
        </div>
        <div class="mat-table-bottom">
            <mat-spinner [diameter]="20" *ngIf="loading"></mat-spinner>
            <mat-paginator  [pageSize]="10" [pageSizeOptions]="[5, 10, 15 ]"
                [showFirstLastButtons]="true"></mat-paginator>
        </div>
    </kt-portlet-body>

</kt-portlet>

This is my component.ts

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { SelectionModel } from '@angular/cdk/collections';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
import { LayoutUtilsService, MessageType } from '../../../../../../core/_base/crud';

// Services and Models
import { SubjectService } from "../../service/subject.service"
import { Subject } from '../../../models/ISubject';
import { EditSubjectComponent } from '../../subject-edit/edit-subject/edit-subject.component';

@Component({
  selector: 'kt-subject-list',
  templateUrl: './subject-list.component.html',

})
export class SubjectListComponent implements OnInit, AfterViewInit {

  dataSource: MatTableDataSource<any>;
  @ViewChild(MatSort, null) sort: MatSort;
  @ViewChild(MatPaginator,  { static: false }) paginator: MatPaginator;

  
  displayedColumns: string[] = ['select', 'name', 'description', 'status', 'actions'];

  searchKey: string;
  selection = new SelectionModel<Subject>(true, []);
  subjectResult: Subject[] = [];
  loading = true;
  constructor(
    public dialog: MatDialog,
    public snackBar: MatSnackBar,
    private layoutUtilsService: LayoutUtilsService,
    private subjectService: SubjectService
  ) {
    
   }


  ngOnInit() {

    this.relodGrid();

  }
  ngAfterViewInit(): void {  
    
  
   
  }


  relodGrid() {
    this.loading = true;
    
    this.subjectService.getAll().subscribe(
      list => {
        let array = list.content.map(item => {

          return {
           id: item.id,
            name: item.name,
            description: item.description,
            status:item.status

          };
        });
        debugger;
        this.loading = false;
        this.subjectResult = list.content;
        this.dataSource = new MatTableDataSource(array);
       
       
        this.dataSource.sort = this.sort;
        setTimeout(() => {
          this.dataSource.paginator = this.paginator;
        });
       
        
        this.dataSource.filterPredicate = (data, filter) => {
          return this.displayedColumns.some(ele => {
            return  ele != 'status' && ele != 'actions' && ele != 'select' && data[ele].toLowerCase().indexOf(filter) != -1;
          });

          
        };
      }
      
      
      );
  }



  deleteSubject(id) {
    const _title: string = "Delete Subject";
    const _description: string = "Are you sure to delete the subject?";
    const _waitDesciption: string = "Deleting Subject";
    const _deleteMessage = "Subject has successfully deleted";

    const dialogRef = this.layoutUtilsService.deleteElement(_title, _description, _waitDesciption);
    dialogRef.afterClosed().subscribe(res => {
      if (!res) {
        return;
      }

      this.subjectService.delete(id).subscribe((result) => {

        this.relodGrid();
        this.layoutUtilsService.showActionNotification(_deleteMessage, MessageType.Delete);
      });

    });
  }


  deleteSubjects() {
    const _title: string = "Delete All Subjects";
    const _description: string = "Are you sure to delete all subjects";
    const _waitDesciption: string = "Deleting";

    const dialogRef = this.layoutUtilsService.deleteElement(_title, _description, _waitDesciption);
    dialogRef.afterClosed().subscribe(res => {
      if (!res) {
        return;
      }

      debugger;
      const idsForDeletion: number[] = [];
      for (let i = 0; i < this.selection.selected.length; i++) {
      idsForDeletion.push(this.selection.selected[i].id);
      }
      this.subjectService.deleteRange(idsForDeletion).subscribe((result) => {

        if(result.operationSuccess){
          this.relodGrid();
          this.layoutUtilsService.showActionNotification("All subjects deleted successfully", MessageType.Delete);
          this.selection.clear();
        }else{
          this.layoutUtilsService.showActionNotification("Some error occurred while deleting records.", MessageType.Delete);
        }
       
      });
     
     
    });
  }


  isAllSelected(): boolean {

    const numSelected = this.selection.selected.length;
    const numRows = this.subjectResult.length;
    return numSelected === numRows;

  }


  masterToggle() {

    if (this.selection.selected.length === this.dataSource.data.length) {
      this.selection.clear();
    } else {
      this.dataSource.data.forEach(row => this.selection.select(row));
    }
  }


  addSubject() {

    const newSubject = new Subject();
    newSubject.id =0;
    newSubject.name='',
    newSubject.description='';
    newSubject.status = 1;
    this.subjectService.initializeFormGroup(); // Set all defaults fields
    this.editSubject(newSubject);
  }

  editSubject(subject: Subject) {

    const dialogConfig = new MatDialogConfig();
    dialogConfig.width = "50%";
    dialogConfig.disableClose = false;
    dialogConfig.data = {subject}
    this.subjectService.populateForm(subject);
    const dialogRef = this.dialog.open(EditSubjectComponent, dialogConfig);

    dialogRef.afterClosed().subscribe(res => {
      this.subjectService.form.reset();
      this.relodGrid();

    });
  }

  onSearchClear() {
    this.searchKey = "";
    this.applyFilter();
  }

  applyFilter() {
    this.dataSource.filter = this.searchKey.trim().toLowerCase();
  }

  getItemCssClassByStatus(status: number = 0): string {
        switch (status) {
            case 0:
                return 'danger';
            case 1:
                return 'success';
            
        }
        return '';
    }

    /**
     * Returns Item Status in string
     * @param status: number
     */
    getItemStatusString(status: number = 0): string {
        switch (status) {
            case 0:
                return 'Disabled';
            case 1:
                return 'Enabled';
        
        }
        return '';
    }

}

This is my setup.module where i am also importing Mat-paginator. The error shows in browser console

index.d.ts.MatPaginator.html:1 ERROR TypeError: Cannot read property 'pipe' of undefined
    at MatSelect.ngAfterContentInit (select.js:613)
    at callProviderLifecycles (core.js:33979)
    at callElementProvidersLifecycles (core.js:33951)
    at callLifecycleHooksChildrenFirst (core.js:33933)
    at checkAndUpdateView (core.js:46590)
    at callViewAction (core.js:46951)
    at execEmbeddedViewsAction (core.js:46908)
    at checkAndUpdateView (core.js:46586)
    at callViewAction (core.js:46951)
    at execEmbeddedViewsAction (core.js:46908)

I have also re-install angular material and tried many things as people suggested but still it is not working.

Answer 1

I resolved the issue by updating the angular/material. Also, i have changed

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

to

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

It resolved my issue. I hope it will helpful for others.