Hide MatPaginator details

Viewed 6716

Im trying to hide the strings that been added automatically by MatPaginator (Items per page: 1 1 – 1 of 2), I try to do the CSS way by setting display:none; or display:none !important; to the container classes but this didn't work:

.mat-paginator-page-size{
    display: none !important;
}

.mat-paginator-range-label{
    display: none !important;
}

I want only the next and previous arrows to show up without any other details.

4 Answers

The correct use for this property is:

<mat-paginator hidePageSize="true">

The reason is that you don't have to use brackets with a boolean value. Without initializing the boolean value in the TS file you may cause a ExpressionChangedAfterItHasBeenCheckedError, which is when an expression value has been changed after change detection has completed. So if you decide use this property with brackets try this:

isHidePageSize: boolean = true;

<pre>
 <mat-paginator [hidePageSize]="isHidePageSize">
</pre>

This is also true of any other property with boolean values.

you can also create a CustomMatPaginatorIntl, and rewrite the function getRangeLabel. Create a CustomMatPaginatorIntl is only write a class that extends from MatPaginatorIntl

export class CustomMatPaginatorIntl extends MatPaginatorIntl {
  getRangeLabel=(page:number, pageSize:number, length:number)=>{
    return ''

  }
}

And use as provider

providers:[{provide: MatPaginatorIntl, useClass: CustomMatPaginatorIntl}]

(if you use as provider in component all the paginator in component not show nothing, if you use as provider in the module, all the paginator in the components that belong to the module not show nothing)

NOTE. in the function:

//the first showed page is: (1+page*pageSize)
//the last showed page is : (1+page)*pageSize
//the total page is:length
//so we can return some like
return (1+page*pageSize)+' - '+(1+page)*pageSize+' pág/'+(length)

Add ::ng-deep in front of both:

::ng-deep .mat-paginator-page-size{
    display: none !important;
}

::ng-deep .mat-paginator-range-label{
    display: none !important;
}

::ng-deep force style to child components.

Applying the ::ng-deep pseudo-class to any CSS rule completely disables view-encapsulation for that rule. Any style with ::ng-deep applied becomes a global style. In order to scope the specified style to the current component and all its descendants, be sure to include the :host selector before ::ng-deep. If the ::ng-deep combinator is used without the :host pseudo-class selector, the style can bleed into other components.

https://angular.io/guide/component-styles

Use this properties in mat-paginator [hidePageSize]="true" like

<mat-paginator [hidePageSize]="true" .....rest properties.....>
Related