How to use transloco in custom MatPaginatorIntl?

[mariansimecek]

Hi I have a problem. I can't figure how to make transloco work with custom class MatPaginatorLanguageIntl that is provided in app.module.ts
Custom class that make translate some parts of pagination:

import { Injectable } from '@angular/core';
import { MatPaginatorIntl } from '@angular/material/paginator';
import { TranslocoService } from '@ngneat/transloco';

@Injectable()
export class MatPaginatorLanguageIntl extends MatPaginatorIntl {
    constructor(private translateService: TranslocoService) {
        super();
        translateService.langChanges$.subscribe((lang) => {
            this.setTranslations();
        });
    }
    setTranslations() {
        this.itemsPerPageLabel = this.translateService.translate(
            'GENERAL.PAGINATOR.ITEMS_PER_PAGE_LABEL',
        );
        this.nextPageLabel = this.translateService.translate('GENERAL.PAGINATOR.NEXT_PAGE_LABEL');
        this.previousPageLabel = this.translateService.translate(
            'GENERAL.PAGINATOR.PREVIOUS_PAGE_LABEL',
        );
        this.firstPageLabel = this.translateService.translate('GENERAL.PAGINATOR.FIRST_PAGE_LABEL');
        this.lastPageLabel = this.translateService.translate('GENERAL.PAGINATOR.LAST_PAGE_LABEL');
        this.of = this.translateService.translate('GENERAL.PAGINATOR.OF');
    }
    of: string = '';

    getRangeLabel = function (page: number, pageSize: number, length: number) {
        if (length === 0 || pageSize === 0) {
            return '0 ' + this.of + ' ' + length;
        }
        length = Math.max(length, 0);
        const startIndex = page * pageSize;
        // If the start index exceeds the list length, do not try and fix the end index to the end.
        const endIndex =
            startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize;
        return startIndex + 1 + ' - ' + endIndex + ' ' + this.of + ' ' + length;
    };
}

On initial load it says missing translations, when route change it works. How to make it working on initial load?
What I am missing?
Thank you

[shaharkazaz]

Try listening to the events stream:

translocoService.events$.pipe(
  filter(e => e.type === 'translationLoadSuccess')
).subscribe(() => this.setTranslation());

or you can try to selectTranslate with the keys you need:

translocoService.selectTranslate([
  'GENERAL.PAGINATOR.ITEMS_PER_PAGE_LABEL',
   ...
]).subscribe((translated) => ...)

[mariansimecek]

Thank you