Add Next and previous button in Angular GET API

by

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.
I can’t use pipe use these demos.

my code is.

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

and my typescript code is

 getMenu() {
    this.api
      .get(
        'GetMenuData'
      )
      .then((data: any) => {
        this.list = data.data;
      });
  }

JSON-

 "Tabledata": [
              {
                "id":"01",
                "data":"Smith"
              },
              {
                "id":"02",
                "data":"Smith2"
              },
              {
                "id":"0",
                "data":"Smith3"
              }
            ]

Now-

Now

I need this way-

wanted

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

87 thoughts on “Add Next and previous button in Angular GET API”