How to change color of ngx-pagination? - css

Question

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.

Answer 1

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>

Answer 2

You can achieve this by editing paginator in the CSS file. For example (red background and red border):
.page-item.active .page-link {
background-color: red;
border-color: red;
}
You can add this for global css file.
An example of fully red paginator:
.page-item.active .page-link {
background-color: red;
border-color: red;
}
.page-link {
color: red;
}
.page-link:hover {
color: red;
}

Answer 3

(document.querySelector('.pagination-next') as HTMLElement).style.color = 'black';
(document.querySelector('.pagination-previous') as HTMLElement).style.color = 'black';
for angular