Customizing Bootstrap Styles in Angular: How to Override Specific Classes

Looking to customize an HTML element 

<div [style.color]="themeService.backgroundColor" class="col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-lg-10 col-lg-offset-1">
            <ul class="pagination" id="pag-bar">
              <li class="page-item2" *ngIf="!getStyle(1)">
                <span class="spl" id="left-arrow" (click)="decPresentPage()">
                  <div class="arrow" (click)="decreasePage()">
                      &lt;
                    </div>
                      <div class="side-text">Previous</div>
                </span>
              </li>
              <li class="page-item">
                <span class="page-link" href="#" (click)="decPresentPage()">
                  <div class="page-text prev">S</div>
                  <br/>
                </span>
              </li>
              <li class="page-item" *ngFor="let num of getNumber(maxPage)">
                <span class="page-link" *ngIf="presentPage>=4 && presentPage-3+num<=noOfPages" [class.active_page]="getStyle(presentPage-3+num)"
                  (click)="getPresentPage(presentPage-3+num)" href="#">
                  <div [class.active_page]="getStyle(presentPage-3+num)" class="page-text">U</div>
                  <span class="page-number">{{presentPage-3+num}}</span>
                </span>
                <span class="page-link" *ngIf="presentPage<4 && num<=noOfPages" [class.active_page]="num+1 == presentPage" (click)="getPresentPage(num+1)"
                  href="#">
                  <div [class.active_page]="num+1 == presentPage" class="page-text">U</div>
                  <span class="page-number">{{num+1}}</span>
                </span>
              </li>
              <li class="page-item">
                <span class="page-link" (click)="incPresentPage()">
                  <div class="page-text next">SPER</div>
                </span>
              </li>
              <div class="next-page-mobile">Page {{count}}</div>
              <li class="page-item2" *ngIf="!getStyle(noOfPages)">
                <span class="spl" (click)="incPresentPage()">
                  <div class="arrow" (click)="increasePage()">&gt;</div>
                  <div class="side-text">Next</div>
                </span>
              </li>
            </ul>
            </div>

Trying to apply custom styles through a service, but facing issues due to bootstrap classes overriding. Attempted rewriting the bootstrap class in a .css file with no success. How can I prevent bootstrap from setting the color style while preserving all other applied styles? Also experimented with changing the style through the theme service by selecting the class element using 

(document.getElementsByClassName("pagination")[0] as HTMLElement).style.background = '#373737';
, however, encountered issues with 
(document.getElementsByClassName("pagination")[0]
being undefined upon page load.

javascriptcssangulartwitter-bootstrap-3

Answer №1

I managed to solve it by implementing 

[style.background-color]="themeService.backgroundColor"
for each internal element.

<div class="col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-lg-10 col-lg-offset-1">
                <ul class="pagination" id="pag-bar">
                  <li class="page-item2" *ngIf="!getStyle(1)">
                    <span [style.background-color]='themeService.backgroundColor' class="spl" id="left-arrow" (click)="decPresentPage()">
                      <div class="arrow" (click)="decreasePage()">
                          &lt;
                        </div>
                          <div class="side-text">Previous</div>
                    </span>
                  </li>
                  <li class="page-item">
                    <span [style.background-color]='themeService.backgroundColor' class="page-link" href="#" (click)="decPresentPage()">
                      <div class="page-text prev">S</div>
                      <br/>
                    </span>
                  </li>
                  <li class="page-item" *ngFor="let num of getNumber(maxPage)">
                    <span [style.background-color]='themeService.backgroundColor' class="page-link" *ngIf="presentPage>=4 && presentPage-3+num<=noOfPages" [class.active_page]="getStyle(presentPage-3+num)"
                      (click)="getPresentPage(presentPage-3+num)" href="#">
                      <div [class.active_page]="getStyle(presentPage-3+num)" class="page-text">U</div>
                      <span class="page-number">{{presentPage-3+num}}</span>
                    </span>
                    <span [style.background-color]='themeService.backgroundColor' class="page-link" *ngIf="presentPage<4 && num<=noOfPages" [class.active_page]="num+1 == presentPage" (click)="getPresentPage(num+1)"
                      href="#">
                      <div [class.active_page]="num+1 == presentPage" class="page-text">U</div>
                      <span class="page-number">{{num+1}}</span>
                    </span>
                  </li>
                  <li class="page-item">
                    <span [style.background-color]='themeService.backgroundColor' class="page-link" (click)="incPresentPage()">
                      <div class="page-text next">SPER</div>
                    </span>
                  </li>
                  <div class="next-page-mobile">Page {{count}}</div>
                  <li class="page-item2" *ngIf="!getStyle(noOfPages)">
                    <span [style.background-color]='themeService.backgroundColor' class="spl" (click)="incPresentPage()">
                      <div class="arrow" (click)="increasePage()">&gt;</div>
                      <div class="side-text">Next</div>
                    </span>
                  </li>
                </ul>
                </div>

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

The resume button is failing to activate any functions

I recently encountered an issue with a JS file that is associated with a Wordpress Plugin, specifically a Quiz plugin featuring a timer. I successfully added a Pause and resume button to the quiz, which effectively pauses and resumes the timer. However, I ...

javascriptjquerytimer

Error message: Issue with AWS Serverless Lambda and Angular - TypeError: express function not defined

I'm encountering an issue when trying to deploy my application from localhost:4200 to AWS serverless Lambda. The error in cloudwatch logs is causing a 500 {"message": "Internal server error"} response when I access the URL. My understanding of AWS is ...

angulartypescriptamazon-web-servicesaws-lambdaaws-serverless

I've been attempting to align the iframe element in the center without success, despite trying out various solutions from

Despite trying to center-align the div using style="text-align: center;", display: block, and align="center", none of these methods seemed to work for me. Here is the code including all attempts: <div align="center" style="text- ...

htmlcssiframebootstrap-4

Capturing a center mouse click event in a directive for Angular 6

I created a unique custom directive where I aim to capture middle mouse button click events. Initially, I thought it would be a straightforward process by setting the normal click event and working from there. However, I noticed that it only triggers when ...

angular

What strategies and techniques should be considered when creating websites optimized for mobile devices?

With a wealth of experience in programming languages like Java, Python, and C, I actively engage in self-study to enhance my skills. While I have dabbled in creating mobile-friendly websites, upon reviewing my work, it is evident that my frontend developme ...

javascripthtmlcssreactjsdesign-patterns

Can TypeScript modules be designed to function in this way?

Seeking to create a versatile function / module / class that can be called in various ways: const myvar = MyModule('a parameter').methodA().methodB().methodC(); //and also this option should work const myvar = MyModule('a parameter') ...

javascriptnode.jstypescriptcallback

What could be the reason for my failing express test?

I'm in the process of configuring a server using Node/Express and I want to write ES6 code, so I've incorporated babel into my setup. Currently, the server is operational, and I can successfully make the necessary requests. However, I am facing ...

javascriptnode.jsexpressmocha.jsbabeljs

Display or conceal a text field in Vue 2/Vuetify 1.5 depending on whether a checkbox is selected, with the possibility of duplicated

I've created a product checkbox selection feature that dynamically shows or hides text fields based on the user's selection. Unfortunately, there is a glitch in the system where selecting the second item causes duplication of text fields from th ...

javascriptvue.jsvuejs2vuetify.js

table that can be scrolled horizontally

I am facing an issue similar to the one discussed in this thread about responsive design for html wide table. In essence, my problem involves a table that is wider than the container div, which has ten columns in width (using bootstrap). The challenge aris ...

jqueryhtmlcss

Tips for understanding nested JSON or array data structure?

My data is stored in a constant called translations and it looks like this: { "item-0": { "_quote-translation": "translation Data", "_quote-translation-language": "English", "_quote-trans ...

javascriptarraysjsonnext.jsgraphql

Looking to design a popup using CSS styles

How can I design a pop-up window using CSS for a specific div? I also want to display additional information within another div inside the popup. ...

csshtml

Horizontal alignment of Inline Block Elements is not achieved

Having trouble with the alignment of a form on a test site? Check out the form located under the div#search-bar. If you inspect the element, I have applied the following CSS: div.nf-field-container { width: 201px; display: inline-block; margin: ...

csswordpressinput

Attempting to set up an Ajax webform with various outputs, but encountering issues with functionality

I'm encountering an issue while creating interactive exercises. I want to display correct or incorrect answers immediately after submission using JSON for retrieving responses, as suggested in a forum. However, my AJAX code isn't working at all. ...

javascriptphpjqueryjsonajax

Unnecessary spacing found within the side navigation menu

Recently, I decided to practice my web development skills by creating a basic webpage using flexbox for the topnav and CSS Grid 12 column layout for the main content. Everything was going smoothly until I encountered some extra whitespace in the sidenav se ...

htmlcssflexboxcss-grid

Accessing a specific element within an array that has been nested within another array, using JavaScript

Here's what my code looks like: planets[0]= new THREE.Mesh( geometry, material ); planettexts[0]= new THREE.Mesh( textGeometry, textMaterial ); planets[0].add(planettexts[0]); Now, I am trying to hide the planettext, but every attempt results in an ...

javascriptarraysthree.js

The traditional function does not have access to a reference to this

For my web development project with Angular 9, I needed to add a typeahead feature using ng bootstrap typeahead. The code provided below worked perfectly: search = (text$: Observable<string>) => text$.pipe( debounceTime(150), disti ...

javascriptangulartypescriptbootstrap-typeahead

Unable to get the onchange event to trigger for a span element

Is there a way to trigger the onchange event on a span element that doesn't seem to be working? Here is the code I am using: Attempt 1 document.getElementById(seconds).addEventListener('change', (event: MutationEvent & { path: any }) =& ...

javascripttypescript

retrieving data from a different controller in AngularJS

Having an issue with passing data from rootScope.reslogin2 to scope.user. It's not displaying as expected, here is my JavaScript file: app.controller("logincont", ['$scope','$http','md5','$window','$rootS ...

javascriptangularjsrootscope

Selecting and combining arrays in JavaScript

I am faced with a dataset that has the following structure: [ { ProductID: 1, ProductName: 'MyProduct', Description: '.. some text here ..', UnwantedData: 'garbage here' }, { ...

javascriptnode.jsmongodblodash

Disappearance of Current User in Console When Refreshing Angular 4/5 Firebase

After creating an Angular 5 login using Firebase, I noticed an issue with the authentication object disappearing upon page reload. Even though the user remains logged in, the auth object vanishes once the page is refreshed (the username is still displayed ...

angularfirebasefirebase-authenticationangular5