As I can't comment on this question, I am making this question 'again'.

So, I have a custom paginator component built over MatPaginator implementation. Its data comes from a service:

@Injectable()
export class PageService extends MatPaginatorIntl {
  itemsPerPageLabel = 'Register by page';

  getRangeLabel = function (page, pageSize, length) {
    if (length === 0 || pageSize === 0) {
      return 'Page 0 of ' + length;
    }
    length = Math.max(length, 0);
    const startIndex = page + 1;
    const remainder = length % pageSize;
    let totalPages = Math.floor(length / pageSize);
    totalPages = remainder > 0 ? totalPages + 1 : totalPages;

    return 'Page ' + (startIndex) + ' of ' + totalPages;
  };
}

Main data of component:

  ngAfterViewInit() {
    const paginatorOriginalText = this.paginator.nativeElement.querySelector('.mat-paginator-range-label');
    const currentPage = paginatorOriginalText.innerHTML.split(' ')[1];
    setTimeout(() => {
      const totalPages = paginatorOriginalText.innerHTML.split(' ')[3];
      paginatorOriginalText.innerHTML = `Page <input class="current-page-input" type="text" value="${currentPage}"> of <span>${totalPages}</span>`;
    }, 1000);
  }

Issue is: totalPages value only gets updated value after 1000ms, as above code. That solution was so proposed on first link up there.

Is there any clean, elegant solution for this nowadays?