Pagination in angular material from data fetched from an api

I get a list of 100+ users fetched from an api. Now I would like to implement that data in the angular material table.

Is it possible in the frontend that i display only 10 users in pageSize and have pagination. I tried but it displays all available users eventhough I have pagination module implemented.

<mat-paginator [pageSize]="10" showFirstLastButtons></mat-paginator>


In the typescript code, i get the list from the parent component.

import {Component, OnInit, ViewChild, Input, OnChanges} from '@angular/core';
import {MatPaginator, MatTableDataSource} from '@angular/material';

@Component({
selector: 'app-users',
templateUrl: './users.component.html',
styleUrls: ['./users.component.scss']
})
export class UsersComponent implements OnInit, OnChanges {
@Input() users;

displayedColumns = ['name', 'id'];
dataSource;

@ViewChild(MatPaginator) paginator: MatPaginator;

constructor() { }

ngOnChanges() {
this.dataSource = new MatTableDataSource<any>(this.users);
}

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


Any help is appreciated.
Thank you

can you show your .ts file?
– mintquan
Jun 29 at 9:56

.ts

@mintquan I have updated the code.. I get the list from the parent component. So i use it on the ngOnChanges to get the list of data.
– surazzarus
Jun 29 at 10:04

ngOnChanges

try in after view Init hook ngAfterViewInit() { this.dataSource.paginator = this.paginator; }
– Vikas
Jun 29 at 10:09

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

@Vikas it doesn't work either
– surazzarus
Jun 29 at 10:12

1 Answer
1

Anyways I made it work.
Putting the paginator in ngOnChanges

ngOnChanges

ngOnChanges() {
this.dataSource = new MatTableDataSource<any>(this.users);
this.dataSource.paginator = this.paginator;
}


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.