Lenght of an observable element for Ngb Pagination and (Current) Message showing in page menu

Question

I'm working in an angular project and tryng to add ngb-pagination to it. The list I'm displaying has an Observable<any[]> type, so I'm not sure how I should get the lenght of it for the [collectionSize] attribute for the ngb-pagination.

I'm declaring my list as

public productosList$!:Observable<any[]>;

I found that I cant get it's length as

(productosList$ | async)?.length

However, when I try to pass this as the [currentSize] value, I get this error:

Type 'number | undefined' is not assignable to type 'number'

Is there any way I can sort this error, or a different way to get the Observable list lenght?

Extra:

Not related to the above issue, when my paginator renders, it shows a "(Current)" message in the active page in the page menu, like this

How can I get rid of it? I've been searching and I think it is supossed to be hidden, but in my case it is not. My ngb-pagination menu code is as follows:

  <ngb-pagination class="d-flex justify-content-center"
  [(page)]="page"
  [pageSize]="pageSize"
  [collectionSize]="(productosList$ | async)?.length">
  </ngb-pagination>

Thank you in advance for any help

Answer 1

The issue is that:

(productosList$ | async)?.length

is of type number | undefined because of the ?. If productosList$ | async is undefined or null, the expression will be undefined or null. If it is defined, then length property will be read.

To fix it, maybe you can do:

[collectionSize] = "(productosList$ | async) ? (productosList$ | async).length : 0"

This way, if it (productsList$ | async) exists, it will be the length and if it doesn't it will be 0.

For, removing the (current), maybe you can add a CSS style of display: none or visibility: hidden for that element.

There seems to be a discussion about it: https://github.com/ng-bootstrap/ng-bootstrap/issues/3870 but I am not sure in how to get it done.