How to do pagination in Angular? - html

Question

I'm getting the data from the back-end using the getUsers API, and then displaying the values using mat table. I'm trying to add the paginator only for the front-end but this does not work. Do I need to add a paginator logic in the allUsers API as well? Please help me edit my code below to enable pagination.
allUsers API
public List<User> allUserss() {
Query q = entityManager.createQuery("SELECT u FROM User u");
return (List<User>) q.getResultList();
}
typescript
export class GadgetSearchFormComponent implements OnInit {
users:any;
user:User= new User(0,"","","");
firstName:string;
lastName:string;
gender:string;
ELEMENT_DATA: User[];
displayedColumns: string[]=['firstName' ,'dob' ,'gender',];
datasource;
filterForm: FormGroup;
constructor(private service: GadgetTracerLogService, private route:ActivatedRoute, private router:Router, private fb:FormBuilder,private dialog: MatDialog) {
this.filterForm = this.fb.group({
firstName: [''],
lastName: [''],
gender: ['']
});
}
#ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
ngOnInit() {
this.datasource=new MatTableDataSource<User>(this.ELEMENT_DATA);
this.filterForm.get("firstName").setValue(null);
this.filterForm.get("lastName").setValue(null);
this.filterForm.get("gender").setValue(null);
this.getUsers();
}
public getUsers(){
let resp=this.service.getUsers();
resp.subscribe(report=>this.datasource=report as User[]);
}
}
html
<mat-card class="data-card">
<mat-card-content>
<table id="DataPreview" mat-table [dataSource]="datasource" multiTemplateDataRows class="mat-elevation-z8" width="100%">
<ng-container matColumnDef="firstName">
<th mat-header-cell *matHeaderCellDef> Full Name </th>
<td mat-cell *matCellDef="let element"> {{element.firstName}} {{element.lastName}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="lastName">
<th mat-header-cell *matHeaderCellDef> Last Name </th>
<td mat-cell *matCellDef="let element"> {{element.lastName}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="gender">
<th mat-header-cell *matHeaderCellDef> Gender </th>
<td mat-cell *matCellDef="let element"> {{element.gender}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="updateSymptomCodeConfigDialog(row)"></tr>
<mat-error *ngIf="searchResultMessage">{{searchResultMessage}}</mat-error>
</table>
<mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 25, 50]">
</mat-paginator>
</mat-card-content>
</mat-card>

Answer 1

in subscribe you create the dataSource and asign the pagination, but remember, you need create a MatTableDataSource
resp.subscribe(report=>{
//see that teh dataSource is a "MatTableDataSource", not the array
this.datasource=new MatTableDataSource<User>(report);
this.dataSource.paginator = this.paginator;
});

Answer 2

You are not connecting your paginator with your data source
Replace this with your viewChild in TS
#ViewChild('paginator') paginator: MatPaginator;
After initializing dataSource in ngOnInIt you have to connect dataSource with your paginator reference like :
ngOnInit() {
this.datasource=new MatTableDataSource<User>(this.ELEMENT_DATA);
this.datasource.paginator = this.paginator;
}
Just do these changes and if any doubt feel free to ask me.