TransWikia.com

Como estilizar um Mat-paginator?

Stack Overflow em Português Asked by Matheus Ribeiro on January 6, 2021

Criei um mat-paginator-intl para modificar o texto do mat-paginator da seguinte forma:

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


}

Porém não consigo colocar uma parte especifica do texto em negrito como podem ver, visto que o label da escape nesse texto, e não tenho acesso direto a cada parte do mat-paginator pelo html.

Alguém sabe algum método de corrigir isso?

One Answer

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

no seu componente você vai adicionar encapsulation: ViewEncapsulation.None, isso vai fazer com que a gente não precise usar ::ng-deep pra modificar o mat-paginator em seguida no seu arquivo css

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

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

Answered by Pedro Henrique Cndido Ferreira on January 6, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP