Need to add a class or a style for the mat-select-option’s div only inside the paginator in Angular 9

user_12883163 0
Viewed 1046

Can anyone help me to find a solution for the following image that I have attached?

i.e. mat-select-option's container div inside the mat-paginator should need an additional class or style for that div.

<mat-form-field>
    <mat-label>Title</mat-label>
  <mat-select [(ngModel)]="selectedValue" name="sample">
    <mat-option>one</mat-option>
    <mat-option>two</mat-option>
    <mat-option>three</mat-option>
  </mat-select>
</mat-form-field>

<div>
<mat-form-field>
    <mat-label>Title</mat-label>
  <mat-select [(ngModel)]="selectedValue" name="sample2">
    <mat-option>one</mat-option>
    <mat-option>two</mat-option>
    <mat-option>three</mat-option>
  </mat-select>
</mat-form-field>
</div>

<table >

<!--Here is the following mat-paginator's [pageSize]="[10, 15, 20]" that generates the mat-select with the options 10, 15, 20 -->

<mat-paginator [length]="totalRecords" [pageSize]="[10, 15, 20]" [pageSizeOptions]="1.pageSizeOptions"
    showFirstLastButtons></mat-paginator>

</table>

</main-componont>

enter image description here][1

angular-material angular css html
3 Answers

Create component for paginator, add viewProviders with overlayPanelClass

@Component({
    selector: "app-paginator",
    templateUrl: "./paginator.component.html",
    viewProviders: [
        {
            provide: MAT_SELECT_CONFIG,
            useValue: {
                overlayPanelClass: "paginator-panel-class"
            } as MatSelectConfig
        }
    ]
})

with this in css file, you can access mat-option

.paginator-panel-class mat-option {
    color: red !important;
}
user_107571290

You can try below code.you need to use ng-deep.

:host ::ng-deep.mat-paginator .mat-paginator-container{
  justify-content: flex-start;
}
user_28264170

You could just use a simple CSS class which you'll have to add to every element or change the root class for the element and have it change everywhere... I am not sure what exactly are you targeting but here is what I mean.

This will change all mat options once added to your main style.css file

.mat-option{
  color: red !important;
}

This will change only elements that have this class, the class could be added to the component's CSS file or to the main style.css file as well...

.sample-class {
    color: red !important;
}
user_131059780
Related