How hide or change tooltip text in mat-paginator?

Viewed 3159

I wanna change/hide tool-tip - next and previous page in mat-paginator.

<mat-paginator [length]="lenght" [pageSize]="size">
</mat-paginator>

2 Answers

In your component class, you need to get a reference to MatPaginator using @ViewChild. From that reference, you get access to the MatPaginatorIntl service that lets you changes the different labels.

For example, the following example would hide tool-tips for previous and next buttons.

@ViewChild(MatPaginator, undefined) paginator: MatPaginator;

ngOnInit() {
    const paginatorIntl = this.paginator._intl;
    paginatorIntl.nextPageLabel = '';
    paginatorIntl.previousPageLabel = '';
}

If you dont need text, fastest way is to hide element with css :)

mat-tooltip-component {
  display: none !important;
}

Related