Material Paginator doesnt work | Angular Community | Page 1

hybrid cosmos Dec 6, 2022, 9:37 PM

#

Html component

<div>{{ dataTable | json }}</div> This line prits out data normally
<div class="table-container">
  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <ng-container matColumnDef="userid">
      <th mat-header-cell *matHeaderCellDef> userid </th>
      <td mat-cell *matCellDef="let element"> {{element.userId}} </td>
    </ng-container>

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

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

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

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
  <mat-paginator [pageSizeOptions]="[2, 4, 6]"
  showFirstLastButtons>
  </mat-paginator>
</div>

Ts component

import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { Observable, Subject, takeUntil } from 'rxjs';
import { RandomApiService } from 'src/app/services/RandomAssApi/random-api.service';
import {MatTableDataSource} from '@angular/material/table';
import {MatPaginator} from '@angular/material/paginator';

@Component({
  selector: 'app-random-stuff',
  templateUrl: './random-stuff.component.html',
  styleUrls: ['./random-stuff.component.css']
})
export class RandomStuffComponent implements OnDestroy, AfterViewInit {

  private readonly _unsubscribeSub: Subject<void>

  public displayedColumns = ['userid','id','title','completed'];
  public random: Observable<any>;
  public dataTable: any;
  public dataSource: MatTableDataSource<any>;

  @ViewChild(MatPaginator) paginator: MatPaginator;

  constructor(private readonly randomService: RandomApiService) {
    this._unsubscribeSub = new Subject<void>();
    this.random = this.randomService.data;
    this.random.pipe(
      takeUntil(this._unsubscribeSub)).subscribe((data) => {
        this.dataTable = data;
      });
  }

  ngAfterViewInit(): void {
    this.dataSource = new MatTableDataSource(this.dataTable);
    this.dataSource.paginator = this.paginator;
  }

  ngOnDestroy(): void {
    this._unsubscribeSub.next();
    this._unsubscribeSub.complete();
  }

  updateData(data: any): void {
    this.randomService.postData(data).pipe(
      takeUntil(this._unsubscribeSub)).subscribe();
  }

}

#

For some reason paginator doesnt work as it should and im super confused

#

why it lets to load entire dataset to table

gaunt delta Dec 6, 2022, 9:42 PM

#

Hi, you are passing dataTable rather than dataSource to your table in the template. The paginator being connected to the DataSource, it doesn't communicate with dataTable

#

dataSource is declared and initialized but never used.

hybrid cosmos Dec 6, 2022, 9:44 PM

#

oh okay and now its empty nice but not nice

gaunt delta Dec 6, 2022, 9:46 PM

#

hybrid cosmos oh okay and now its empty nice but not nice

That's working as expected with your code. You are populating the dataSource with dataTable. But the latter is initialized with asynchronous data: at the time you are populating the dataSource, dataTable is still undefined.

#

Move the dataSource initialization in the subscribe

hybrid cosmos Dec 6, 2022, 9:47 PM

#

 this.random.pipe(
      takeUntil(this._unsubscribeSub)).subscribe((data) => {
        this.dataSource = new MatTableDataSource(this.dataTable);
        this.dataTable = data;
      });

#

this u mean?

gaunt delta Dec 6, 2022, 9:48 PM

#

Well you can even remove dataTable, initialize dataSource with data

hybrid cosmos Dec 6, 2022, 9:48 PM

#

mm still empty

#

export class RandomStuffComponent implements OnDestroy, AfterViewInit {

  private readonly _unsubscribeSub: Subject<void>

  public displayedColumns = ['userid','id','title','completed'];
  public random: Observable<any>;
  public dataSource: MatTableDataSource<any>;

  @ViewChild(MatPaginator) paginator: MatPaginator;

  constructor(private readonly randomService: RandomApiService) {
    this._unsubscribeSub = new Subject<void>();
    this.random = this.randomService.data;
    this.random.pipe(
      takeUntil(this._unsubscribeSub)).subscribe((data) => {
        this.dataSource = new MatTableDataSource(data);
      });
  }

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

  ngOnDestroy(): void {
    this._unsubscribeSub.next();
    this._unsubscribeSub.complete();
  }

  updateData(data: any): void {
    this.randomService.postData(data).pipe(
      takeUntil(this._unsubscribeSub)).subscribe();
  }

}

gaunt delta Dec 6, 2022, 9:49 PM

#

Is there some error logged in devtools?

hybrid cosmos Dec 6, 2022, 9:50 PM

#

Cannot set properties of undefined (setting 'paginator')

#

ye moved datasource.paginator

#

to subsribe

#

and it works

#

maybe you have link to that example?

gaunt delta Dec 6, 2022, 9:53 PM

#

hybrid cosmos maybe you have link to that example?

https://material.angular.io/#table-schematic

Angular Material

UI component infrastructure and Material Design components for Angular web applications.

hybrid cosmos Dec 6, 2022, 9:55 PM

#

oh i can just put observable to datasource directly

#Material Paginator doesnt work