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.

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

  1. What you are looking for is "pagination".

    In my opinion a good approad is that your API only returns one item instead of a list.
    But your API needs a option to take additional query parameters like ?page=2 or ?limit=1&offset=1 which both would return the second item.

    Then you do not need to loop through the list but you only get one item and show it as a card. With a click on the next button you call your API with ?page=3 and get the next item.

    To show Page 2/10 on every page you need to return the total amount of pages too.

    Alternative

    You load the whole list on page load and only show one item at a time. If you click on next, show the next item in the array.

    Reply

Leave a Comment