How to change color of ngx-pagination?

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