How to differentiate mat-select style and mat-paginator mat-select styles?

Question

I'm creating angular 7 web app , and using one mat-select dropdown and one mat-paginator. now i'm hide mat-select down arrow.

Here is the mat-select docs.

//hide down arrow
::ng-deep .mat-select-arrow {
width: 0;
height: 0;
border-left: 0px solid transparent; 
border-right: 0px solid transparent;
border-top: 5px solid;
margin: 0 4px;
}

after that problem comes in mat-paginator, paginator dropdown arrow not coming. how to differentiate both dropdown.

i want to dropdown arrow in mat-paginator.

Answer 1

You could add the following css definition.

:host ::ng-deep.mat-paginator .mat-select-arrow {
  border-left: 5px solid transparent !important;
  border-right: 5px solid transparent !important;
}