CODEWITHSUNDEEP
angularuser-interface
rgoal
rgoal

Reputation: 1326

Angular Material Table Pagination

I am using Angular CLI material table pagination. It is not working for whatever reason. I Logged a message inside the ngAfterViewInit and was able to see the alert.

html

<mat-table #table [dataSource]="dataSource">
                        <ng-container matColumnDef="Comment">
                            <mat-header-cell *matHeaderCellDef> Commment </mat-header-cell>
                            <mat-cell *matCellDef="let row"> {{row.Comment}} </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, 20]">
                    </mat-paginator>

component.ts

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

@Component({
    selector: 'dashboard',
    moduleId: module.id,
    templateUrl: 'dashboard.component.html'


})


    export class DashboardComponent implements OnInit {

        dataSource = new MatTableDataSource();
        @ViewChild(MatPaginator) paginator: MatPaginator;


        displayedColumns = ['Comment'];

        ngOnInit(): void {
            this.GetToDoList(this.userID);

        }

        GetToDoList(PNSLUID: string) {
            this._dashboardService.getToDoList(PNSLUID)
                .subscribe(
                data => {
                  //  this.toDoList = data.result;
                    this.dataSource = new MatTableDataSource(data.result);
                      },
                error => console.log('GetControls Method: ' + <any>error, 'alert alert-danger'));
        }


                ngAfterViewInit() {

            this.dataSource.paginator = this.paginator;
        }

since I am using angular cli i put hammer.js and web-animations.min.js angular-cli.json

angular-cli.json
     "scripts": [
        "scripts/jquery-1.10.2.min.js",
        "scripts/jquery-migrate-1.2.1.min.js",
        "scripts/jquery-ui.js",
        "scripts/bootstrap.min.js",
        "scripts/hammer.js",
        "scripts/web-animations.min.js"

      ],

Upvotes: 0

Views: 1455

Answers (1)

masterfloda
masterfloda

Reputation: 3038

You are creating a new datasource in the subscriptor instead of using the existing one. So what happens is:

1) You construct the class with dataSource being a new instance of new MatTableDataSource();

2) OnInit you call your (ajax?) getToDoList()

3) AfterViewInit set's the paginator option of the dataSource.

4) The ajax call is finished, getToDoList() emits a dataChange, which triggers the next subscriptor. And this overrides this.dataSource with a NEW INSTANCE of MatTableDataSource.

I have not worked with MatTabeDataSource myself yet. And it hasn't even made it to the documentation, but I found the solution in the readme:

    GetToDoList(PNSLUID: string) {
        this._dashboardService.getToDoList(PNSLUID)
            .subscribe(
                data => {
                    this.dataSource.data = data.result;
                },
                error => console.log('GetControls Method: ' + <any>error, 'alert alert-danger')
            );
    }

Upvotes: 1

Related Questions