How to do pagination in Angular?

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

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.

Answer 2

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;
});