Angular Material Pagination / Typescript

Question

I am trying to add Pagination to my table with material. However, my paginator doesn't seem to want to connect to my table and I'm not sure why. I have defined my data source, implemented necessary components, and I believe my formatting is correct. What am I missing?

My datasource is defined as forecasts here but it also doesn't work when defined as "dataSource" it just makes my table data disappear entirely. I'm assuming I need to change something with my GET method but I don't want to mindlessly change details if unnecessary.

HTML

<table mat-table [dataSource]="forecasts" class="mat-elevation-z8 buttonSpace" width="1000px" align="center">

    <ng-container matColumnDef="ID">
      <th mat-header-cell *matHeaderCellDef width="200px">
        <button mat-raised-button color="primary" [routerLinkActive]="['link-active']" [routerLink]="['/AddWeatherForecast']">
          <mat-icon>
            add
          </mat-icon>
        </button>

        <button mat-raised-button color="accent" (click)="refreshWeatherForecastList()">
          <mat-icon>
            refresh
          </mat-icon>
        </button>
      </th>
      <td mat-cell *matCellDef="let forecast">
        <button mat-raised-button color="primary" [routerLinkActive]="['link-active']" routerLink="/EditWeatherForecast/{{forecast.ID}}">
          <mat-icon>
            edit
          </mat-icon>
        </button>
        <button mat-raised-button color="accent" (click)="deleteWeatherForecast(forecast)">
          <mat-icon>
            delete
          </mat-icon>
        </button>
      </td>
    </ng-container>

    <ng-container matColumnDef="date">
      <th mat-header-cell *matHeaderCellDef class="sizing"> Date </th>
      <td mat-cell *matCellDef="let forecast"> {{forecast.Date}} </td>
    </ng-container>

    <ng-container matColumnDef="tempC">
      <th mat-header-cell *matHeaderCellDef class="sizing"> Temperature (C.) </th>
      <td mat-cell *matCellDef="let forecast"> {{forecast.TemperatureC}} </td>
    </ng-container>

    <ng-container matColumnDef="tempF">
      <th mat-header-cell *matHeaderCellDef class="sizing"> Temperature (F.) </th>
      <td mat-cell *matCellDef="let forecast"> {{forecast.TemperatureF}} </td>
    </ng-container>

    <ng-container matColumnDef="summary">
      <th mat-header-cell *matHeaderCellDef class="sizing"> Summary </th>
      <td mat-cell *matCellDef="let forecast"> {{forecast.Summary}} </td>
    </ng-container>

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

  </table>
  <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div

TS

import { MatPaginator } from '@angular/material/paginator';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-WeatherForecast',
  templateUrl: './WeatherForecast.component.html'
})

export class WeatherForecastComponent implements OnInit, AfterViewInit
{

  constructor(private service: WeatherForecast,) { }

  forecasts: any = [];
  ID = this.forecasts.ID;
  displayedColumns: string[] = ['ID','date', 'tempC', 'tempF', 'summary'];
  dataSource = new MatTableDataSource<any>(this.forecasts);


  @ViewChild(MatPaginator) paginator: MatPaginator;

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

  ngOnInit()
  {
    this.refreshWeatherForecastList();
  }

  refreshWeatherForecastList()
  {
    this.service.list().subscribe(data =>
    {
      this.forecasts = data;
    });
  }

Eliseo · Accepted Answer · 2021-07-06 20:14:27Z

0

The paginator only work with a DataSource MAtDataSource: you has in your .html [dataSource]="forecasts"

You need use in your .html

<table mat-table [dataSource]="datasource"..>
</table>

And change your function "refreshWeatherForecastList"

  refreshWeatherForecastList()
  {
    this.service.list().subscribe(data =>
    {
      this.dataSource = new MatTableDataSource<any>(data);
      this.dataSource.paginator = this.paginator;
    });
  }

(Remember that each time you change the dataSource, you need asign the "paginator)

answered Jul 6, 2021 at 20:14

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pablo Alejandro Perez Acosta · Accepted Answer · 2023-02-04 20:19:48Z

Thank you. The following code worked for me but your suggestion simplify it even more:

constructor(private logInfoService: LogInfoService) {
    //
    this.informeLogRemoto = this.logInfoService.getLogRemoto();
    //
    const myObserver = {
      next: (p_logEntry: LogEntry[])     => { 
        //
        console.log('Observer got a next value: ' + JSON.stringify(p_logEntry));
        //
        this.dataSource           = new MatTableDataSource<LogEntry>(p_logEntry);
        this.dataSource.paginator = this.paginator;
      },
      error: (err: Error)       => console.error('Observer got an error: ' + err),
      complete: () => console.log('Observer got a complete notification'),
    };
    //
    this.informeLogRemoto.subscribe(myObserver);
  }

Collectives™ on Stack Overflow

Angular Material Pagination / Typescript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related