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?
<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
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP