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.

cssangular

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

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

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

Applicable for Angular framework.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Top method for obtaining base64 encoding of an image in Angular or Node.js

Looking to obtain Base64 data for images. Currently utilizing Angular 6 on the frontend and NodeJS on the backend. Should I extract the Base64 string on the frontend or is it better to handle conversion on the backend before returning it to the frontend? ...

javascriptnode.jsangularbase64

Creating a div element with a fixed size that remains the same regardless of its content

Check out the code snippet below for displaying an image and title: <div id="eventsCollapsed" class="panel-collapse collapse" ng-controller="videoController"> <div class="panel-body"> <div ...

cssangularjstwitter-bootstraptwitter-bootstrap-3

Add a class by utilizing the :class attribute

I reviewed the documentation, but I am still struggling to implement this in my project. Initially, I simply want to display a specific class using vue.js that I can later modify dynamically. I just need to establish the default behavior of that class, so ...

javascripthtmlcssvue.jsvuejs2

I recently aligned a component within a column of the Bootstrap grid using the <center> tag

Apologies for admitting this on Stackoverflow, but I'm struggling to center an element and the center tag seems to do the trick. My CSS skills are limited, so I'm reaching out to see if there's a better way to achieve this? <div class="c ...

htmlcsstwitter-bootstrap

Angular - Automatically populate nested form with provided data

Here is the link to my StackBlitz project: https://stackblitz.com/edit/create-eez7wi?file=app/app.component.ts I am facing an issue where when I load the resources, it fills all fields except for the skill if more than 1 is entered. setResourceDTOS() { ...

angular

Tips for creating unique Styles for H1, H2, and H3 with MaterialCSS by utilizing createTheme

In my application built with NextJS and styled with MaterialCSS, I have created two themes: a dark theme and a light theme using the following code: import { createTheme } from '@mui/material/styles'; export const darkTheme = createTheme({ pal ...

cssreactjsmaterial-uimaterial-designnext.js13

The Angular4 service being utilized is not defined within the public function

Currently, I am facing an issue with my services setup. I have two services in place - the first service is responsible for the map function within the http CRUD Function, while the second service is supposed to perform a task that is provided by the first ...

angularangular-services

What causes Next.JS to automatically strip out CSS during the production build process?

Encountering unpredictability in CSS loading while deploying my Next.JS site. Everything appears fine locally, but once deployed, the CSS rules seem to vanish entirely. The element has the attached class, yet the corresponding styling rules are nowhere to ...

javascriptcssreactjswebpacknext.js

Challenges with Aligning Panels in Column 6

My initial encounter with bootstrap was interesting. I attempted to have two panels placed side by side using the col-lg-6 class. The left panel was meant to be a link to an article, along with an image, while the right panel would serve as a signup/login ...

htmlcssbootstrap-4

Issue: Unable to link to 'FormGroup' because it is not recognized as a valid property of 'form'

app.module.ts import { BrowserModule } from '@angular/platform-browser'; import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core'; import {RouterModule} from '@angular/router'; import {AppRoutes} from './app.routin ...

angularformstypescript

How to fix an unresolved TypeScript import?

Within my node_modules directory, there is a package that contains the following import statement: import { x } from 'node_modules/@types/openfin/_v2/main'; Unfortunately, I am receiving an error message stating "cannot find module 'node_mo ...

angulartypescripttypesnode-modules

Exciting effects activated by hovering on a button

I'm attempting to create an animated effect by having a rectangle expand over the button when hovered by the user. However, I am unsure how to achieve this and have hit a roadblock. Here's what I want: There's a button. There's a rect ...

htmlcssanimationhovertransition

The navigation bar vanishes as soon as I click the Modal button

I am experiencing an issue where the Navbar disappears when I open a modal while using Bootstrap. Navbar before opening Modal https://i.stack.imgur.com/Oo9qb.png Navbar after opening Modal https://i.stack.imgur.com/dlK1V.png <script src="https:// ...

htmlcssnavbarbootstrap-5bootstrap5-modal

Sequentially loading Bootstrap columns as the page loads

Is there a way to load columns one by one with a time gap when the page is loaded? Here's the code snippet that can achieve this: setTimeout(function() { $("#box1").removeClass("noDisplay"); },1000); setTimeout(function() { ...

javascriptjqueryhtmlcsstwitter-bootstrap

How come ngOnChange is unable to detect changes in @Input elements when ngOnDetect is able to do so?

Check out this plunker Please note: In order to see the effect, you need to restart the app after entering the link. import {Component, OnInit, Input, OnChanges, DoCheck} from 'angular2/core' @Component({ selector: 'sub', templat ...

javascripttypescriptangular

The module 'DynamicTestModule' has imported an unexpected directive called 'InformationComponent'. To resolve this issue, please include a @NgModule annotation

Even though I found a similar solution on Stackoverflow, it didn't resolve my issue. So, let me explain my scenario. When running the ng test command, I encountered the following error: Failed: Unexpected directive 'InformationComponent' i ...

angulartypescriptwebstorm

Switch Image to Background Image on Mobile Devices

I am currently working on a website that needs a special page for an upcoming event. Typically, the pages on this site have a mast banner image that stretches across the full width of the page. However, for this particular page, it is necessary for the ima ...

cssdrupalresponsive-design

Angular is set up to showcase every single image that is stored within an array

I am having trouble displaying the images from the "image_url" array using a for loop. The images are not showing up as expected. Here is the content of the array: image_url: [ 0: "https://xyz/16183424594601618342458.5021539.jpg" 1: "https://xyz/1618342459 ...

angulartypescript

Child component responsible for closing the modalI will guide you through

A component in my project has a header with a modal window that pops up when clicked: <a (click)="open(content)" class="in">Sign in</a> <ng-template #content let-modal> <button type="button" class="close" aria-label="Close" (click)= ...

angular

Guide to Display chat.html Overlay on home.html Using Ionic 2

In my Ionic project, I have two pages: home.html chat.html I am looking to display chat.html over home.html at the bottom right as a chat window. How can I accomplish this? I have attempted to illustrate what I envision in an image: ...

angularionic-frameworkionic2