Search code examples
cssangularprimengprimeng-dropdowns

How can i stilize primeNG paginator in Angular

I can't stilize primeNG paginator in my Angular application.This paginator contains a dropdown, which is actually where I want to stylize it for the data number selection. I searched many times but couldn't figure it out.

 <p-paginator styleClass="customPrime" [first]="first" [rows]="rows" [totalRecords]="120" [rowsPerPageOpitons]="[10,20,30]"/>

I tried :host and ::ng-deep codes with my styleClass but didn't work.

Solution

  • We can use the below CSS, I had to include the CSS file in the @Component({...}) decorator, maybe that was the problem!

    ::ng-deep .styled-paginator .p-paginator-rpp-options {
  border: 1px solid black !important;
  background-color: azure !important;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;
}

    Stackblitz Demo