title: Angular 9 - Angular Material mat-paginator is not working
body: <p>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</p>
  <pre><code>&lt;kt-portlet&gt;
      &lt;kt-portlet-header [class]=&quot;'card-head-lg'&quot; &gt;
          &lt;ng-container ktPortletTitle&gt;
              &lt;span&gt;Subjects list&lt;/span&gt;
          &lt;/ng-container&gt;
  
          &lt;ng-container ktPortletTools&gt;
              &lt;button (click)=&quot;addSubject()&quot;  mat-raised-button matTooltip=&quot;Create new subject&quot; color=&quot;primary&quot;
                  type=&quot;button&quot;&gt;
                  &lt;span&gt;New Subject&lt;/span&gt;
              &lt;/button&gt;
          &lt;/ng-container&gt;
      &lt;/kt-portlet-header&gt;
  
      &lt;kt-portlet-body&gt;
          &lt;div class=&quot;form mb-3&quot;&gt;
              &lt;div&gt;
                  &lt;div class=&quot;row align-items-center&quot;&gt;
  
                      &lt;div class=&quot;col-md-4 kt-margin-bottom-10-mobile&quot;&gt;
                          &lt;label&gt;Search:&lt;/label&gt;
                          &lt;mat-form-field class=&quot;mat-form-field-fluid&quot; appearance=&quot;outline&quot;&gt;
                              &lt;input matInput  [(ngModel)]=&quot;searchKey&quot;  (keyup)=&quot;applyFilter()&quot;  /&gt;
                              &lt;button mat-button matSuffix mat-icon-button aria-label=&quot;Clear&quot; *ngIf=&quot;searchKey&quot; (click)=&quot;onSearchClear()&quot;&gt;
                                  &lt;mat-icon&gt;close&lt;/mat-icon&gt;
                                &lt;/button&gt; 
                          &lt;/mat-form-field&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          
              &lt;div class=&quot;row align-items-center collapse form-group-actions kt-margin-top-20 kt-margin-bottom-20&quot;
                  [ngClass]=&quot;{'show' : selection.selected.length &gt; 0}&quot;&gt;
                  &lt;div class=&quot;col-xl-12&quot;&gt;
                      &lt;div class=&quot;form-group form-group-inline&quot;&gt;
                          &lt;div class=&quot;form-label form-label-no-wrap&quot;&gt;
                              &lt;label class=&quot;font-bold font-danger&quot;&gt;
                                  &lt;span&gt;Records selected:&lt;/span&gt;
                                  {{ selection.selected.length }}
                              &lt;/label&gt;
                          &lt;/div&gt;
                          &lt;div&gt;
                              &lt;ng-container&gt;
                                  &lt;button (click)=&quot;deleteSubjects()&quot; mat-raised-button color=&quot;warn&quot;
                                      matTooltip=&quot;Delete selected subjects&quot; class=&quot;mat-button-mt-4&quot;&gt;
                                      &lt;mat-icon&gt;delete&lt;/mat-icon&gt;
                                      Delete All
                                  &lt;/button&gt;&amp;nbsp;
                              &lt;/ng-container&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;mat-table-wrapper&quot; [hidden]=&quot;loading&quot;&gt;
              &lt;mat-table class=&quot;lmat-elevation-z8&quot; #table [dataSource]=&quot;dataSource&quot; matSort #sort1=&quot;matSort&quot;
                  matSortActive=&quot;id&quot; matSortDirection=&quot;asc&quot; matSortDisableClear&gt;
                  &lt;ng-container matColumnDef=&quot;select&quot;&gt;
                      &lt;mat-header-cell *matHeaderCellDef class=&quot;mat-column-checkbox&quot;&gt;
                          &lt;mat-checkbox (change)=&quot;$event ? masterToggle() : null&quot;
                              [checked]=&quot;selection.hasValue() &amp;&amp; isAllSelected()&quot;
                              [indeterminate]=&quot;selection.hasValue() &amp;&amp; !isAllSelected()&quot; [color]=&quot;'primary'&quot;&gt;
                          &lt;/mat-checkbox&gt;
                      &lt;/mat-header-cell&gt;
                      &lt;mat-cell *matCellDef=&quot;let row&quot; class=&quot;mat-column-checkbox&quot;&gt;
                          &lt;mat-checkbox (click)=&quot;$event.stopPropagation()&quot;
                              (change)=&quot;$event ? selection.toggle(row) : null&quot; [checked]=&quot;selection.isSelected(row)&quot;
                              [color]=&quot;'primary'&quot;&gt;
                          &lt;/mat-checkbox&gt;
                      &lt;/mat-cell&gt;
                  &lt;/ng-container&gt;
  
                  &lt;ng-container matColumnDef=&quot;name&quot;&gt;
                      &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;Name&lt;/mat-header-cell&gt;
                      &lt;mat-cell *matCellDef=&quot;let element&quot;&gt;{{element.name}}&lt;/mat-cell&gt;
                    &lt;/ng-container&gt;
                
                    &lt;ng-container matColumnDef=&quot;description&quot;&gt;
                      &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;Description&lt;/mat-header-cell&gt;
                      &lt;mat-cell *matCellDef=&quot;let element&quot;&gt;{{element.description}}&lt;/mat-cell&gt;
                    &lt;/ng-container&gt;
  
                    &lt;ng-container matColumnDef=&quot;status&quot;&gt;
                      &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;Status&lt;/mat-header-cell&gt;
                      &lt;mat-cell *matCellDef=&quot;let subject&quot;&gt;
                          &lt;span
                              class=&quot;label label-lg label-light-{{ getItemCssClassByStatus(subject.status) }} label-inline&quot;&gt;{{  getItemStatusString(subject.status) }}&lt;/span&gt;
                      &lt;/mat-cell&gt;
                  &lt;/ng-container&gt;
  
                  &lt;ng-container matColumnDef=&quot;actions&quot;&gt;
                      &lt;mat-header-cell *matHeaderCellDef&gt;Actions&lt;/mat-header-cell&gt;
                      &lt;mat-cell *matCellDef=&quot;let element&quot;&gt;
                          &lt;ng-container&gt;
                              
                              &lt;button (click)=&quot;editSubject(element)&quot; mat-icon-button color=&quot;primary&quot; matTooltip=&quot;Edit subject&quot;
                                  &gt;
                                  &lt;mat-icon&gt;create&lt;/mat-icon&gt;
                              &lt;/button&gt;&amp;nbsp;
                          &lt;/ng-container&gt;
  
                          &lt;ng-container&gt;
                              &lt;button (click)=&quot;deleteSubject(element.id)&quot; mat-icon-button color=&quot;warn&quot; matTooltip=&quot;Delete subject&quot; type=&quot;button&quot;
                                  &gt;
                                  &lt;mat-icon&gt;delete&lt;/mat-icon&gt;
                              &lt;/button&gt;&amp;nbsp;
                          &lt;/ng-container&gt;
  
                      &lt;/mat-cell&gt;
                  &lt;/ng-container&gt;
  
                  &lt;mat-header-row *matHeaderRowDef=&quot;displayedColumns&quot;&gt;&lt;/mat-header-row&gt;
  
                  &lt;mat-row *matRowDef=&quot;let row; columns: displayedColumns&quot;&gt;&lt;/mat-row&gt;
              &lt;/mat-table&gt;
          &lt;/div&gt;
          &lt;div class=&quot;mat-table-bottom&quot;&gt;
              &lt;mat-spinner [diameter]=&quot;20&quot; *ngIf=&quot;loading&quot;&gt;&lt;/mat-spinner&gt;
              &lt;mat-paginator  [pageSize]=&quot;10&quot; [pageSizeOptions]=&quot;[5, 10, 15 ]&quot;
                  [showFirstLastButtons]=&quot;true&quot;&gt;&lt;/mat-paginator&gt;
          &lt;/div&gt;
      &lt;/kt-portlet-body&gt;
  
  &lt;/kt-portlet&gt;
  </code></pre>
  <p>This is my component.ts</p>
  <pre><code>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 &quot;../../service/subject.service&quot;
  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&lt;any&gt;;
    @ViewChild(MatSort, null) sort: MatSort;
    @ViewChild(MatPaginator,  { static: false }) paginator: MatPaginator;
  
    
    displayedColumns: string[] = ['select', 'name', 'description', 'status', 'actions'];
  
    searchKey: string;
    selection = new SelectionModel&lt;Subject&gt;(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 =&gt; {
          let array = list.content.map(item =&gt; {
  
            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(() =&gt; {
            this.dataSource.paginator = this.paginator;
          });
         
          
          this.dataSource.filterPredicate = (data, filter) =&gt; {
            return this.displayedColumns.some(ele =&gt; {
              return  ele != 'status' &amp;&amp; ele != 'actions' &amp;&amp; ele != 'select' &amp;&amp; data[ele].toLowerCase().indexOf(filter) != -1;
            });
  
            
          };
        }
        
        
        );
    }
  
  
  
    deleteSubject(id) {
      const _title: string = &quot;Delete Subject&quot;;
      const _description: string = &quot;Are you sure to delete the subject?&quot;;
      const _waitDesciption: string = &quot;Deleting Subject&quot;;
      const _deleteMessage = &quot;Subject has successfully deleted&quot;;
  
      const dialogRef = this.layoutUtilsService.deleteElement(_title, _description, _waitDesciption);
      dialogRef.afterClosed().subscribe(res =&gt; {
        if (!res) {
          return;
        }
  
        this.subjectService.delete(id).subscribe((result) =&gt; {
  
          this.relodGrid();
          this.layoutUtilsService.showActionNotification(_deleteMessage, MessageType.Delete);
        });
  
      });
    }
  
  
    deleteSubjects() {
      const _title: string = &quot;Delete All Subjects&quot;;
      const _description: string = &quot;Are you sure to delete all subjects&quot;;
      const _waitDesciption: string = &quot;Deleting&quot;;
  
      const dialogRef = this.layoutUtilsService.deleteElement(_title, _description, _waitDesciption);
      dialogRef.afterClosed().subscribe(res =&gt; {
        if (!res) {
          return;
        }
  
        debugger;
        const idsForDeletion: number[] = [];
        for (let i = 0; i &lt; this.selection.selected.length; i++) {
        idsForDeletion.push(this.selection.selected[i].id);
        }
        this.subjectService.deleteRange(idsForDeletion).subscribe((result) =&gt; {
  
          if(result.operationSuccess){
            this.relodGrid();
            this.layoutUtilsService.showActionNotification(&quot;All subjects deleted successfully&quot;, MessageType.Delete);
            this.selection.clear();
          }else{
            this.layoutUtilsService.showActionNotification(&quot;Some error occurred while deleting records.&quot;, 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 =&gt; 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 = &quot;50%&quot;;
      dialogConfig.disableClose = false;
      dialogConfig.data = {subject}
      this.subjectService.populateForm(subject);
      const dialogRef = this.dialog.open(EditSubjectComponent, dialogConfig);
  
      dialogRef.afterClosed().subscribe(res =&gt; {
        this.subjectService.form.reset();
        this.relodGrid();
  
      });
    }
  
    onSearchClear() {
      this.searchKey = &quot;&quot;;
      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 '';
      }
  
  }
  </code></pre>
  <p>This is my setup.module where i am also importing Mat-paginator.
  The error shows in browser console</p>
  <pre><code>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)
  </code></pre>
  <p>I have also re-install angular material and tried many things as people suggested but still it is not working.</p>