Add Next and pevious button in Angular GET API

I display a list of data on my page.
Now the client says display one and then add next and previous button for pev and next.

my code is.

        <div *ngFor="let l of list">        
            <ion-card mode="ios" *ngIf="!=null">
                  <div class="ion-des" [innerHTML]="| safe"></div>

and my typescript code is

 getMenu() {
      .then((data: any) => {
        this.list =;

enter image description here

Instead of data 1, data 2, data 3, …, data n
I need to add data 1 and Next and Pevious btn on this page.

1 thought on “Add Next and pevious button in Angular GET API”

  1. Okey create one variable in component like


    and then create two button in html as prev and next and activate first one while pageIndex>0 and next button activate when pageIndex<list.length-1 prev button function will decrease pageIndex and next button will increase pageIndex

      this.pageIndex =pageIndex -1; 
      this.pageIndex =pageIndex +1; 

    and create custom pipe to array to show indexed one

    import { Pipe, PipeTransform } from '@angular/core';
      name: 'filtercard',
    export class FiltercardPipe implements PipeTransform {
      transform(value: any[], index: number): any {
        return [value[index]];

    in html

       <div *ngFor="let l of list | filtercard : pageIndex ">       

Leave a Comment