Styling Angular Material Paginator
13,298
Solution 1
Use this css(for more style open F12 and override material declaretion):
::ng-deep .mat-paginator-page-size-select {
width: 27px!important;
}
::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline {
background-color: transparent;
}
::ng-deep .mat-select-value {
color: #005999;
font-weight: bold;
font-size: 15px;
}
::ng-deep .mat-select-arrow {
color: #005999;
}
::ng-deep .mat-option{
padding: 0!important;
}
::ng-deep .mat-option-text {
text-align: right;
}
For captions modifying you should provide MatPaginatorIntl. Example
Solution 2
If you use separate style for components and you want style child component you need to use in your css
style ::ng-deep
before you style child component selector, for example:
::ng-deep .mat-select-value {
border: 1px solid red!important;
}
Related videos on Youtube
Author by
Saif Ali
Updated on June 04, 2022Comments
-
Saif Ali almost 2 years
I have an Angular Material Paginator that looks like
I want to style it and it should look like
I am having a very difficult time to style it. I was just able to move the elements in the paginator around(start and end positions), apart from this I was not able to modify anything.
Please let me know how to do the required styling ?
Here is the stackblitz link https://stackblitz.com/edit/angular-tjhkpo
-
לבני מלכה over 5 yearsplease share your code in stackblitz fork and show us link:stackblitz.com/edit/angular-material
-
לבני מלכה over 5 yearsit is the only way we can help you (please put in blitz only relevant code)
-
Saif Ali over 5 yearsHere you go Link I want to style the paginator in the table as the target paginator shown in my question @לבנימלכה
-
לבני מלכה over 5 yearsnice! add this link to question
-
Saif Ali over 5 yearsI have added the link !
-
-
Saif Ali over 5 yearsThanks a lot for your help and such a quick response! but if you see the target paginator- It has 1-15 of 40 items. So currently the code shows as 1-10 of 11. How to add this 'items'. Also the navigation arrows should get shifted to the right side.
-
Saif Ali over 5 yearsThanks ! Is there a way to add 'items' after 1-10 of 11 ? It should look like 1-10 of 11 items
-
לבני מלכה over 5 yearsi think you can not control it
-
Saif Ali over 5 yearsYeah... I guess so!