How to use ngx-pagination to apply pagination on list of items using angular 13?

Question

I work on a web application with ASP.NET Core 6 and Angular 13.

This application displays a list of items successfully without any issue.

My issue How to Apply pagination on Angular 13 using ngx-pagination ?

What I tried is:

(1) Create Web API action to display all items

public async Task<IActionResult> GetAll(int pageNumber)
{
    var allitems = _iitem.GetAllItems();

    var result = _pageHelper.GetPage(allitems.AsQueryable(), pageNumber);

    var itemsdata = new ItemsPageViewModel
            {
                items = result.Items,
                Pager = result.Pager
            };

    return Ok(itemsdata);
    }

When I call this action method, it returns json data as shown here:

{
    "items": [
        {
            "id": 3,
            "itemNameEN": "pen"
        },
        {
            "id": 4,
            "itemNameEN": "pencil"
        },
        {
            "id": 5,
            "itemNameEN": "pen2"
        }
    ],
    "pager": {
        "numberOfPages": 1,
        "currentPage": 1,
        "totalRecords": 3
    }
}

(2) I created a component items logic in component.ts:

ngOnInit(): void {
    this.retrieveAllItems();
  }
 
 retrieveAllItems(): void {
  this.erpservice.getAll()
    .subscribe(
      data => {
   
        this.items = data.items;
        console.log(data);
      },
      error => {
        console.log(error);
      });
}

(3) I created a component view component.html:

<table id="customers">
  <tr>
      <th>Id</th>
      <th>ItemNameEN</th>
  </tr>
  <tr *ngFor="let item of items">
      <td>{{item.id}}</td>
      <td>{{item.itemNameEN}}</td>
  </tr>
</table>

How to apply pagination on angular 13 using ngxPagination ?

I install ngxPagination module

my issue how to apply pagination on angular 13 ?