Como no puedo comentar sobre esta pregunta , estoy haciendo esta pregunta 'nuevamente'.

Entonces, tengo un componente de paginador personalizado creado sobre la implementación de MatPaginator. Sus datos provienen de un servicio:

 @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; }; }

Datos principales del componente:

 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); }

El problema es: el valor totalPages solo obtiene el valor actualizado después de 1000 ms, como el código anterior. Esa solución fue tan propuesta en el primer enlace allí.

¿Hay alguna solución limpia y elegante para esto hoy en día?