I want to change the background color of ngx-pagination
My code:
<pagination-controls class="custom-pagination" id="indicadorPaginationResults" (pageChange)="p=$event" maxSize="9" directionLinks="true" autoHide="true" previousLabel="" nextLabel=""></pagination-controls>
The default background color is blue, and I want to change to red.
How do I it?
Solution:
In the CSS:
.custom-pagination /deep/ .ngx-pagination .current {background: red;}
And install jquery in the project.
Use pagination-template
instead of pagination-controls
.
Example:
<pagination-template
#p="paginationApi"
(pageChange)="onPageChange($event)"
*ngIf="myList">
<div class="pagination-custom">
<ul class="pagi">
<li class="item">
<a *ngIf="!p.isFirstPage()"
[class.disabled]="p.isFirstPage()"
(click)="p.previous()"
class="page-link"
aria-label="Previous">
<span aria-hidden="true" class="la la-caret-left"></span>
<span class="sr-only">Previous</span>
</a>
</li>
<li *ngFor="let page of p.pages"
[class.active]="p.getCurrent() === page.value"
class="page-item">
<a (click)="p.setCurrent(page.value)"
class="page-link"> {{ page.label }}
</a>
</li>
</ul>
</div>
</pagination-template>