Paginator not properly working with table Datasource using angular material for angular 2 app

Question

I am trying implement a table in my angular 2 app with paginator component.

I am successfully able to create table using the table component in angular 2.But I did it using the below import statement.

"import { DataSource } from '@angular/cdk/collections';"

Below shown is my home.component.ts

import { Component , OnInit , ViewChild} from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { DataSource } from '@angular/cdk/collections';
import { MatPaginator } from '@angular/material';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss']
})


export class HomeComponent  implements OnInit {


 @ViewChild(MatPaginator) paginator: MatPaginator;

    ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
  }


displayedColumns = ['num', 'message'];

  dataSource: eDataSource;

  ELEMENT_DATA: Element[] = [

  {num: 1, message: 'Message 1 '},
  {num: 2, message: 'Message 2 '},
  {num: 3, message: 'Message 3 '},
  {num: 4, message: 'Message 4 '},
  {num: 5, message: 'Message 5 '},
  {num: 6, message: 'Message 6 '},
  {num: 7, message: 'Message 7 '},
  {num: 8, message: 'Message 8 '},
  {num: 9, message: 'Message 9 '},
  {num: 10, message: 'Message 10 '},
  {num: 11, message: 'Message 11 '},
  {num: 12, message: 'Message 12 '},
  {num: 13, message: 'Message 13 '},
  {num: 14, message: 'Message 14 '},
  {num: 15, message: 'Message 15 '},
  {num: 16, message: 'Message 16 '},
  {num: 17, message: 'Message 17 '},
  {num: 18, message: 'Message 18 '},
  {num: 19, message: 'Message 19 '},
  {num: 20, message: 'Message 20'},

  ];

  ngOnInit() {
    this.dataSource = new eDataSource(this.ELEMENT_DATA);
  }
}

export interface Element {
    num: number;
    message: string;
  }

export class eDataSource extends DataSource<any> {

  constructor(private element: Element[]) {
    super();
  }

  connect(): Observable<Element[]> {
    return Observable.of(this.element);
  }

  disconnect() {}
}

Below shown is my home.component.html

<mat-card class="styletable">
<div class="example-container mat-elevation-z8">
 <mat-table #table [dataSource]="dataSource">
<ng-container matColumnDef="num" >
  <mat-header-cell style="max-width: 100px;" *matHeaderCellDef> No. </mat-header-cell>
  <mat-cell style="max-width: 100px;" *matCellDef="let element"> {{element.num}} </mat-cell>
</ng-container>

<!-- Name Column -->
<ng-container matColumnDef="message">
  <mat-header-cell *matHeaderCellDef> Message </mat-header-cell>
  <mat-cell style="text-align: left;" *matCellDef="let element"> {{element.message}} </mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>


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

Using the above code I am getting the following error in my cli

"D:/Angular/loginmat/src/app/home/home.component.ts (20,21): Property 'paginator' does not exist on type 'eDataSource'."

can any body please guide me so as to what I am missing to implement the paginator with my table?

Are you importing MatPaginatorModule and MatTableModule in your application module? — Jesse Hautala
If you check DataSource<T> you can see it does not contain a 'paginator' property, unlike MatTableDataSource<T>. If you want to use paginator out of the box, I suppose you should use MatTableDataSource — Bart de Ruijter

Tomasz Chudzik Tomasz Chudzik · Accepted Answer · 2018-08-01T13:24:45

To set a DataSource you should've used a MatTableDataSource. It contains a paginator property.

Here is a fixed version of the TS file:

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { MatPaginator, MatTableDataSource } from '@angular/material';

@Component({
  selector: 'app-home',
  templateUrl: './home-component.component.html',
  styleUrls: ['./home-component.component.css']
})

export class HomeComponent implements OnInit {

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatPaginator) dataSource: MatTableDataSource<Element>;

  displayedColumns = ['num', 'message'];

  ngOnInit() {
    this.dataSource = new MatTableDataSource(ELEMENT_DATA);
    this.dataSource.paginator = this.paginator;
  }
}

const ELEMENT_DATA: Element[] = [
  { num: 1, message: 'Message 1 ' },
  { num: 2, message: 'Message 2 ' },
  { num: 3, message: 'Message 3 ' },
  { num: 4, message: 'Message 4 ' },
  { num: 5, message: 'Message 5 ' },
  { num: 6, message: 'Message 6 ' },
  { num: 7, message: 'Message 7 ' },
  { num: 8, message: 'Message 8 ' },
  { num: 9, message: 'Message 9 ' },
  { num: 10, message: 'Message 10 ' },
  { num: 11, message: 'Message 11 ' },
  { num: 12, message: 'Message 12 ' },
  { num: 13, message: 'Message 13 ' },
  { num: 14, message: 'Message 14 ' },
  { num: 15, message: 'Message 15 ' },
  { num: 16, message: 'Message 16 ' },
  { num: 17, message: 'Message 17 ' },
  { num: 18, message: 'Message 18 ' },
  { num: 19, message: 'Message 19 ' },
  { num: 20, message: 'Message 20' },
];

export interface Element {
  num: number;
  message: string;
}

Paginator not properly working with table Datasource using angular material for angular 2 app

Below shown is my home.component.ts

Below shown is my home.component.html

1 Answers