Materialize Pagination and Sorting not working in child component

Question

I am new to materialize pagination and here is my hierarchy, app

modules > list > list.component app.component

I tried sample code example in app.component and worked fine. However, same implementation not working in App/modules/list/listing.component.

Here is the error and sample code.

import {
  Component,
  ViewChild
} from '@angular/core';
import {
  MatPaginator
} from '@angular/material/paginator';
import {
  MatTableDataSource
} from '@angular/material/table';
import {
  MatSort
} from '@angular/material/sort';
@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})


export class ListComponent {
  title = 'app';
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];

  dataSource = new MatTableDataSource < PeriodicElement > (ELEMENT_DATA);
  @ViewChild(MatPaginator, {
    static: true
  }) paginator!: MatPaginator; // = new MatPaginator();
  @ViewChild(MatSort, {
    static: true
  }) sort!: MatSort;


  ngAfterViewInit() {
    setTimeout(() => {
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
    }, 1000)
  }
}

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: PeriodicElement[] = [{
    position: 1,
    name: 'Hydrogen',
    weight: 1.0079,
    symbol: 'H'
  },
  {
    position: 2,
    name: 'Helium',
    weight: 4.0026,
    symbol: 'He'
  },
  {
    position: 3,
    name: 'Lithium',
    weight: 6.941,
    symbol: 'Li'
  },
  {
    position: 4,
    name: 'Beryllium',
    weight: 9.0122,
    symbol: 'Be'
  },
  {
    position: 5,
    name: 'Boron',
    weight: 10.811,
    symbol: 'B'
  },
  {
    position: 6,
    name: 'Carbon',
    weight: 12.0107,
    symbol: 'C'
  },
  {
    position: 7,
    name: 'Nitrogen',
    weight: 14.0067,
    symbol: 'N'
  },
  {
    position: 8,
    name: 'Oxygen',
    weight: 15.9994,
    symbol: 'O'
  },
  {
    position: 9,
    name: 'Fluorine',
    weight: 18.9984,
    symbol: 'F'
  },
  {
    position: 10,
    name: 'Neon',
    weight: 20.1797,
    symbol: 'Ne'
  },
];

    <div class="wrapper">
      <table mat-table [dataSource]="dataSource" name="abc" matSort class="mat-elevation-z8">
        <ng-container matColumnDef="position">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
          <td mat-cell *matCellDef="let element"> {{element.position}} </td>
        </ng-container>

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

        <ng-container matColumnDef="weight">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Weight </th>
          <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
        </ng-container>

        <ng-container matColumnDef="symbol">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </th>
          <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
      Angular 8 pagination
      <mat-paginator [pageSizeOptions]="[5, 10, 15]" showFirstLastButtons></mat-paginator>
    </div>

I am not sure, if I am missing any reference.

Answer 1

You have to import MatTableModule in your list.module.ts file

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

@NgModule({
  imports:[  
    MatTableModule,
    //other modules
  ]