Angular material paginator not working as intended-CodePudding

Happy new year

I am learning angular and I used angular material paginator on my table which gets data from an API. It displays the number of rows and entries correctly on bottom, but all the data is still displayed in single page. I have searched and tried a lot of solutions on the internet but in vain.

I am using a view password component which is displayed in router-outlet.

Component HTML

<div >
  <table mat-table [dataSource]="passwords">

    <!-- Position Column -->
    <ng-container matColumnDef="S.No">
      <th mat-header-cell *matHeaderCellDef> S.No. </th>
      <td mat-cell *matCellDef="let password"> {{password.website}} </td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="Website">
      <th mat-header-cell *matHeaderCellDef> Website </th>
      <td mat-cell *matCellDef="let password"> {{password.website}} </td>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="URL">
      <th mat-header-cell *matHeaderCellDef> URL </th>
      <td mat-cell *matCellDef="let password"> {{password.url}} </td>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="Password">
      <th mat-header-cell *matHeaderCellDef> Password </th>
      <td mat-cell *matCellDef="let password"> {{password.password}} </td>
    </ng-container>

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

  <mat-paginator showFirstLastButtons [pageSize]="5" [pageSizeOptions]="[5, 10, 25, 50]">
  </mat-paginator>
</div>

Component ts

import { HttpClient } from '@angular/common/http';
import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource, MatTableDataSourcePaginator } from '@angular/material/table';
import {MatPaginator} from '@angular/material/paginator';

@Component({
    selector: 'view-passwords',
    templateUrl: './view-passwords.component.html',
    styleUrls: ['./view-passwords.component.css']
})
export class ViewPasswordsComponent{

    url:any= 'http://localhost:8080/showPass';

    passwords:any;

    displayedColumns: string[] = ['S.No', 'Website', 'URL', 'Password'];
    dataSource: any;

    @ViewChild(MatPaginator, {static:false}) paginator !: MatPaginator;

    constructor(private http: HttpClient, private cdr:ChangeDetectorRef){
      this.http.get(this.url)
        .subscribe(Response=>{
          (this.passwords=Response);
          this.cdr.detectChanges();
          this.dataSource= new MatTableDataSource(this.passwords);
          this.dataSource.paginator = this.paginator;
          //console.log(this.dataSource.paginator)
        })
    }

My localhost my webpage

The bottom paginator is working fine as I can see, but the table displays all data in single page, despite the paginator showing 1-5. Am I doing anything wrong?

Angular material paginator displaying data in multiple pages, but it displays all data in single page

CodePudding user response：

I refactored and simplified your typescript-code a bit. I think one main-problem was that you pass passwords instead of dataSource to the HTML. Can you try if the following code works?

Component TS:

@ViewChild(MatPaginator)
paginator!: MatPaginator;

url = 'http://localhost:8080/showPass';

displayedColumns: string[] = ['S.No', 'Website', 'URL', 'Password'];
dataSource!: MatTableDataSource<User>;

constructor(private http: HttpClient){
    this.http.get(this.url).subscribe(res=>{
        this.dataSource = new MatTableDataSource(res);
        this.dataSource.paginator = this.paginator;
    })
}

Modification needed in Component HTML:

<table mat-table [dataSource]="dataSource">