Ways to adjust the ngx-pagination color scheme?

Question

Ways to adjust the ngx-pagination color scheme?

I am looking to customize the background color of ngx-pagination

Here is my current 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, but I want to change it to red.

How can I achieve this?

Here is the Solution:

You will need to update the CSS as follows:

.custom-pagination /deep/ .ngx-pagination .current {background: red;}

Additionally, make sure to have jQuery installed in your project.

css angular

Answer 1

Answer №1

Switch to using pagination-template in place of pagination-controls.

For instance:

<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

Switch to using pagination-template in place of pagination-controls.

For instance:

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

Answer №2

To customize the paginator, you can adjust the CSS styling. For instance, to give it a red background and border:

.page-item.active .page-link {
    background-color: red;
    border-color: red;
}

This code can be added to your global CSS file for uniformity.

Here's an example of a fully red paginator:

.page-item.active .page-link {
    background-color: red;
    border-color: red;
}

.page-link {
    color: red; 
}

.page-link:hover {
    color: red; 
}

Answer 4

To customize the paginator, you can adjust the CSS styling. For instance, to give it a red background and border:

.page-item.active .page-link {
    background-color: red;
    border-color: red;
}

This code can be added to your global CSS file for uniformity.

Here's an example of a fully red paginator:

.page-item.active .page-link {
    background-color: red;
    border-color: red;
}

.page-link {
    color: red; 
}

.page-link:hover {
    color: red; 
}

Answer 5

Answer №3

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

Applicable for Angular framework.

Answer 6

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

Applicable for Angular framework.

Ways to adjust the ngx-pagination color scheme?

Answer №1

Answer №2

Answer №3

Similar questions

Tips for formatting list items to display quotes in a scrolling ticker

When checking for a `null` value, the JSON property of Enum type does not respond in

Prevent background image animation in CSS

Identifying Similar Components in Angular 4: A Guide to Recognizing Rendered Elements

Modifying the appearance of the search box

Tips for showcasing cards in a horizontal inline layout

Issue with page reload in Angular 8 when URL contains a dot

Unable to make jQuery animate top function work

Exploring steps to secure routes without authentication using the amplify authenticator component in Angular

How to perfectly center an absolute positioned icon on a 767px screen

When accessing a method exposed in Angular2 from an external application, the binding changes are lost

How can I use HTML code to style the header cell values of a table?

Eliminate the navigation bar option from a website template

Can a YouTube video be triggered to play when a specific CSS style is selected?

menu roll-up in an upward direction

Empty gaps separating two divs nested within another div within a div (unable to function)

Issue: Unable to locate a differ that supports the object '[object Object]' of type 'object'. NgFor can only bind to Iterables like Arrays

Adjust the font size of MaterialUI icons using CSS

The variable X has been defined, but it's never actually utilized. Despite declaring it, I have not accessed its

Refreshing the page causes the Angular/Ionic Singleton instance to be destroyed