7

I try to set background color to ngb-pagination item for angular2, but is does not work.

<ngb-pagination style="background-color:gray;" [collectionSize]="120" [(page)]="page" [maxSize]="5" [boundaryLinks]="true">

Thank you.

Samet ÇELİKBIÇAK
  • 895
  • 3
  • 12
  • 25
  • I don't really know ng-bootstrap but as far I can see on their documentation page it's a component with list so you have ``ul`` element which contains ``li`` as items and those both have their classes so try to change their styles instead. – Buczkowski Oct 15 '18 at 19:49
  • Thank you @Buczkowski for answer, I'll try it and write the result here. – Samet ÇELİKBIÇAK Oct 15 '18 at 19:53

5 Answers5

10

I don't if this library provide a way to customize the theme, if there that will be the best way.

But if you want to override some of the component inner styles you can use ::ng-deep.

    ngb-pagination ::ng-deep ul > li:not(.active) > a {
          background-color: red !important;
    }

    ngb-pagination ::ng-deep ul > li.active > a {
          background-color: lightgreen !important;
    }

Also style="background-color:gray;" will definitely not work, you can see the DOM and it's style

Vivek Kumar
  • 4,822
  • 8
  • 51
  • 85
6

A little late to the party, but I got it to work in Angular 8 by adding the following code to my css file:

ngb-pagination ::ng-deep a {
  color: black !important;
}

ngb-pagination ::ng-deep .page-item.active .page-link {
  border-color: black;
  background-color: lightgrey;
}

ngb-pagination ::ng-deep .page-item.active .page-link:focus, .page-link:not(:disabled):not(.disabled):active:focus {
  box-shadow: 0 0 0 0.1rem dimgrey;
}

ngb-pagination ::ng-deep .page-link:not(:disabled):not(.disabled):active:focus {
  box-shadow: 0 0 0 0.1rem dimgrey;
}
HansDrita
  • 61
  • 1
  • 3
3

I found the solution, thank for helping. In my condition problem solved like that in my css file. To overwrite the pagination stuff just using /deep/ keyword.

/deep/ .pagination .page-item .page-link {
  border-radius: 0 !important;
}

/deep/ .pagination .page-link {
  border-top-style: none !important;
  border-bottom-style: none !important;
  background-color: #f6f6f6 !important;
  color: black !important;
}

Thank you.

Samet ÇELİKBIÇAK
  • 895
  • 3
  • 12
  • 25
  • 1
    The accepted answer doesn't work anymore. @ConnorsFan answer worked for me. – omostan Feb 04 '20 at 19:48
  • 1
    /deep/ is deprecated as of now. And even if ::ng-deep doesn'twork, visit https://stackoverflow.com/questions/47024236/what-to-use-in-place-of-ng-deep/49308475#49308475 – DHRUV GAJWA Feb 05 '20 at 09:10
2

Suggested answer didn't have any effect for me, ::ng-deep selector looks like makes no effect to my page.

It worked with this:

ngb-pagination .page-item.active .page-link
    z-index: 3
    color: #fff   // text color
    background-color: #00AED6
Luca Asga
  • 41
  • 1
  • 7
-1

For me, the example below worked like a charm.

ngb-pagination .page-item.active .page-link {
  background-color: #7460ee;
  border-color: #7460ee;
}
Lex
  • 70
  • 3