How can i create this in angular?

Question

enter image description here I tried making this mat-list . but i have to add pagination, searching and filtering also in this. Any help will be appreciated.

Answer 1

It's difficult to help you without sharing code, but i will try. First of all initialize the paginator data in your component.ts and make a function to handle events:

myData : MyDataType[] = [];

  //set your own data
  length = 100;
  pageSize = 10;
  pageSizeOptions: number[] = [5, 10, 25, 100];
  pageIndex = 0;
  // MatPaginator Output
  pageEvent: PageEvent;

handlePageEvent( event:PageEvent) {
  this._api.getDataFromServer(event.pageIndex, event.pageSize).subscribe(
    (res: MyDataType[])=>{
      //assign obtained data to an array for example
      this.myData = res;
    },
    (err)=>{handleError(err);}
  )
  
  
  
 //interface
 export interface MyDataType{
  id : number;
  img: string;
  title: string;
  description: string;
  }

And then in your view add the paginator. When the user changes the index, or every property of paginator, make an http request to obtain the data. Some backend lang supports pagination (ex. Springboot with Jpa Repository).

<mat-list-item *ngFor="let data of myData">
  <h1 mat-line>{{data.title}}</h1>
  <div mat-line>{{data.description}}</div>
  <!-- insert your own data -->
</mat-list-item>

<mat-paginator [length]="length"
               [pageSize]="pageSize"
               [pageSizeOptions]="pageSizeOptions"
               [pageIndex]="pageIndex"
               (page)="handlePageEvent($event)">
</mat-paginator>