Implementing showing X to Y of Z with ngb-bootstrap

Question

A little context I am using ng-bootstrap 14 and Angular 15. I also use Laravel 10 for my back end. I have a table listing codeUses and it's paginated. On top I have a line saying showing X to Y of Z.

This is what that looks like

I've assembled this manually as I could not find any examples of this in the ng-bootstrap website. This is how I did it

HTML:

    <div class="mt-5 lead">
      <ul class="pagination">
        <li class="page-item"><a role="button" (click)="selectPage(discountCodeUsers.code_uses.current_page - 1)">&laquo;</a></li>
        <li class="px-1">Showing results {{discountCodeUsers.code_uses.from}} to {{discountCodeUsers.code_uses.to}} of {{discountCodeUsers.code_uses.total}}</li>
        <li class="page-item"><a role="button" (click)="selectPage(discountCodeUsers.code_uses.current_page + 1)">&raquo;</a></li>
      </ul>
    </div>

This feels wrong but I've looked everywhere for an example of this with no luck. This seems like a common element. If there is a correct way to implement this what is it?