Issue
I am trying to populate mat-table via dynamic data from an API. Data is getting populated but pagenation part is unresponsive. I tried solutions provided in below links on Stackoverflow, non of them worked. I am using Angular 16 and angular material 16.2.10
PFB my code: Component.ts:
import { HttpClient } from '@angular/common/http';
import { Component, OnInit, ViewChild, AfterViewInit, ChangeDetectorRef } from '@angular/core';
import {MatPaginator, MatPaginatorModule} from '@angular/material/paginator';
import {MatTableDataSource, MatTableModule} from '@angular/material/table';
@Component({
selector: 'app-test-api',
templateUrl: './test-api.component.html',
styleUrls: ['./test-api.component.css'],
standalone: true,
imports: [MatTableModule, MatPaginatorModule]
})
export class TestAPIComponent implements OnInit, AfterViewInit {
public displayedColumns: string[] = ['id', 'name', 'email', 'city', 'latitude'];
public getJsonValue: any;
public dataSource: any = [];
//code for pagination: tried all solutions from stackoverflow , none worked
@ViewChild(MatPaginator) paginator: MatPaginator;
//@ViewChild(MatPaginator, {read: true}) paginator: MatPaginator;
/*@ViewChild(MatPaginator, {static: false})
set paginator(value: MatPaginator) {
this.dataSource.paginator = value;
} */
/*@ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
this.paginator = mp;
this.dataSource.paginator = this.paginator;
}*/
constructor(private http : HttpClient){
}
ngOnInit(): void {
this.getMethod();
//this.cdr.detectChanges();
}
public getMethod(){
this.http.get('https://jsonplaceholder.typicode.com/users').subscribe((data) => {
console.table(data);
console.log(this.paginator);
this.getJsonValue = data;
this.dataSource = data;
//tried below code from stackoverflow but didn't work and commented ngAfterViewInit code
this.dataSource.paginator = this.paginator;
});
}
ngAfterViewInit() {
//this.dataSource.paginator = this.paginator;
}
}
HTML:
<p>test-api works!</p>
<H1>Test API</H1>
<!--p>{{getJsonValue | json}}</p-->
<h1>Test API: Dynamic</h1>
<p>dynamic-table works!</p>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource">
<!-- Position Column -->
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef> Id </th>
<td mat-cell *matCellDef="let element"> {{element.id}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef> email </th>
<td mat-cell *matCellDef="let element"> {{element.email}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="city">
<th mat-header-cell *matHeaderCellDef> city </th>
<td mat-cell *matCellDef="let element"> {{element.address.city}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="latitude">
<th mat-header-cell *matHeaderCellDef> Latitude </th>
<td mat-cell *matCellDef="let element"> {{element.address.geo.lat}} </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]"
[pageSize]="5"
showFirstLastButtons
aria-label="Select page of periodic elements">
</mat-paginator>
</div>
Current Table UI with disabled pagination:
Solution
You define your variable as MatTableDataSource
dataSource!:MatTableDataSource<any>
When you get it
public getMethod(){
this.http.get('https://jsonplaceholder.typicode.com/users').subscribe((data:any[]) => {
//you create a MatTableDataSource
this.dataSource = new MatTableDataSource(data);
//you asig the paginator
this.dataSource.paginator = this.paginator;
});
}
NOTE: You should use a service to get the data (it's considered "good practice" instead of use in your component the httpClient, e.g.
@Injectable({
providedIn: 'root',
})
export class DataService {
constructor(private httpClient:HttpClient) { }
//simply return an observable
getData():Observable<any[]> { //<--indicate the return of the function
return this.httpClient.get<any[]>('https://jsonplaceholder.typicode.com/users') //<--indicate in get the type
}
}
In your component
constructor(private dataService:DataService){}
//and use
public getMethod(){
this.dataService.getData().subscribe((data:any[]) => {
this.dataSource = new MatTableDataSource(data);
this.dataSource.paginator = this.paginator;
});
}
Answered By - Eliseo
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.