Table Paginator is not working as expected - json

Question

I am fetching the data from the server, the data is coming well and showing in the but the paginator is not working although it is only showing.
The paginator is showing the webpage but it is not working as the next button, go to page etc.
<div class="container">
<div class="row">
<div class="col my-3">
<div class="mat-elevation-z8">
<app-message></app-message>
<table mat-table [dataSource]="dataSource">
<!-- Position Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}}</td>
</ng-container>
<!-- Position Column -->
<ng-container matColumnDef="phone">
<th mat-header-cell *matHeaderCellDef> Phone </th>
<td mat-cell *matCellDef="let element"> {{element.phone}}</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>
</div>
</div>
</div>
This is the TS code.
export class UsersComponent implements OnInit {
displayedColumns: string[] = ['name', 'phone'];
dataSource = new MatTableDataSource<PeriodicElement>([]);
#ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
constructor(public data: DataService, private rest: RestApiService) {}
ngOnInit() {
this.getUsers();
this.dataSource.paginator = this.paginator;
}
async getUsers(){
try {
const data =await this.rest.get("http://localhost:3030/user/auth/all/users");
if(data['status']) {
console.log(data['data']);
this.dataSource = data['data'];
} else {
this.data.error(data['message']);
}
} catch (error) {
this.data.error(error['message']);
}
}
}
interface PeriodicElement {
slno:number,
name: string,
phone: string
}
const dataArray: PeriodicElement[] = [];

Answer 1

Can u integrate AfterViewInit and call this
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
}
and change
this.dataSource = data['data'];
to
this.dataSource.data = data['data'];

Answer 2

Make sure you import MatPaginator from #angular/material/paginator not #angular/material

Answer 3

Seems like you have not added the corresponding table and paginator modules inside your app.module.ts
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import {MatTableModule} from '#angular/material/table';
import {MatPaginatorModule} from '#angular/material/paginator';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
#NgModule({
imports: [ BrowserModule, FormsModule, MatTableModule,MatPaginatorModule ],
declarations: [ AppComponent, HelloComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
As your code was not working even on stackblitz, so i have added dummy data to show you an example. Please find stackblitz here: https://stackblitz.com/edit/angular-tcgvnu