How to style a Mat-Gymnator?

Question

I created a mat-paginator-intl to modify the text of mat-paginator as follows:

import { MatPaginatorIntl } from '@angular/material';

export class MatPaginatorIntlCustom extends MatPaginatorIntl {

    itemsPerPageLabel = 'Items por paginas';

    nextPageLabel = 'Próxima';

    previousPageLabel = 'Anterior';

    firstPageLabel = 'Primeira página';
    lastPageLabel = 'Última página';

    // tslint:disable-next-line:only-arrow-functions
    getRangeLabel = (page: number, pageSize: number, length: number) => {
        if (length === 0 || pageSize === 0) {
            return `0 of ${length}`;
        }
        length = Math.max(length, 0); const startIndex = page * pageSize;
        const endIndex = startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize;
        const label = `${startIndex + 1} - ${endIndex} de <strong>${length}</strong>`
        return label;
    }


}

However, I cannot place a specific part of the text in bold as you can see, since the label of the escape in this text, and I have no direct access to each part of the mat-paginator by html.

Does anyone know any way to fix this?

Answer 1

<mat-paginator [length]="100"
              [pageSize]="10"
              [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>

in its component you will add Encapsulation: Viewencapsulation.None, this will make us not need to use ::ng-deep to modify the mat-Paginator next in your css file

@Component({
  selector: 'paginator-example',
  templateUrl: 'paginator-example.html',
  styleUrls: ['paginator-example.css'],
  encapsulation: ViewEncapsulation.None,
})

.mat-paginator-range-label {
  background: blue;
}