Styling Angular Material Paginator

3
votes

I have an Angular Material Paginator that looks like

enter image description here

I want to style it and it should look like

enter image description here

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

3
htmlcssangularangular-materialangular-material-paginator
please share your code in stackblitz fork and show us link:stackblitz.com/edit/angular-material - לבני מלכה
it is the only way we can help you (please put in blitz only relevant code) - לבני מלכה
Here you go Link I want to style the paginator in the table as the target paginator shown in my question @לבנימלכה - Saif Ali
nice! add this link to question - לבני מלכה
I have added the link ! - Saif Ali

3 Answers

8
votes

Use this css(for more style open F12 and override material declaretion):

See working code

::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

2
votes

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;
}
0
votes

When using ::ng-deep try to add more restrictive selectors so that you reduce the risk of side-effects e.g.

::ng-deep {
  .mat-select-panel[aria-label="Items per page:"] {
    .mat-option-text {
      font-size: 1.4rem;
    }
  }
}