Discover the steps to dynamically alter the inclusion of the Bootstrap CSS file within an Angular project

I manage a multi-language website in both English (EN) and Arabic (AR). Currently, I am utilizing Bootstrap CSS from a CDN and adjusting the CDN link based on the selected language.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Seeker</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="./assets/images/icon.svg" />
    <link
      id="bootstrap_css"
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css"
    />
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

lang.service.ts

  setDir(lang = this.currentLang$.value) {
    if (isPlatformBrowser(this.platformId)) {
      const linkTag = document.getElementById('bootstrap_css');
      if (lang === 'en') {
        document.dir = 'ltr';
        document.documentElement.setAttribute('lang', 'en');
        linkTag?.setAttribute(
          'href',
          'https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css'
        );
      } else {
        document.dir = 'rtl';
        document.documentElement.setAttribute('lang', 'ar');
        linkTag?.setAttribute(
          'href',
          'https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.rtl.min.css'
        );
      }
    }
  }

I am considering avoiding the use of a CDN and instead want to include the file from node_modules in angular.json dynamically based on the selected language. How can I achieve this?

angular.json

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css", // for English
  "node_modules/bootstrap/dist/css/bootstrap.rtl.min.css",  // for Arabic
  "src/styles/styles.scss"
],

If updating angular.json dynamically is not feasible, is it possible to import the file dynamically in style.scss?

Answer №1

Customize your styles.scss file to dynamically import the styles according to the chosen language:

$selectedLang: 'fr'; // Define the selected language here

@if $selectedLang == 'fr' {
  @import 'node_modules/bootstrap/dist/css/bootstrap.min.css';
} @else {
  @import 'node_modules/bootstrap/dist/css/bootstrap.rtl.min.css';
}

// Additional styles
@import 'src/styles/styles.scss';

Modify the value of $selectedLang depending on the selected language in a dynamic way. This can be done by adjusting the variable in your Angular component or using Angular services to set the language dynamically.

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

How is it that the chosen attribute functions for every ng-container?

I have 2 ng-containers. When I am in one view, I want "My Appointments" selected in the options dropdown when navigating to that view. In the other view, I want "Active" selected in the options dropdown. Here is my html code: <div class="wrapper w ...

JQuery encountered a HTTP 404 error, signaling that the server was unable to locate anything that matched the requested URI

I am currently learning front-end development on my own and encountered an issue with implementing jQuery. You can find all the files for my site here: The problem I am facing is that there should be blog posts displayed between the header and navigation ...

HTML: Choose from a list of options by selecting multiple items from

I want to implement a select field with the multiple attribute as a standard dropdown field with size=1: <select name="test[]" size="1" multiple> <option>123 <option>456 <option>789 </select> Any reason why the a ...

Animating an image in an HTML document by clicking a button through jQuery

I am trying to figure out how to make an image move from the left to the right of a page when a button is clicked. I thought the code below would work, but unfortunately, it's not functioning as expected. I'm new to JQuery and could use some guid ...

How to design <p> elements inside a bordered container?

I am currently working on a webpage that features text enclosed in bordered boxes with styled formatting. The primary issue I am encountering is that when I try to add another paragraph within the styled <p> tag containing the border styling, the su ...

Struggling to locate tab link elements with Selenium using different approaches

I am encountering difficulties with Selenium in locating a specific set of tab link elements by their IDs or link text. During my usage of Selenium, I am attempting to click through each of the tabs ("DESCRIPTION AND PRICE", "FINISH", and "NOTES") and extr ...

Integrating CSS with Material-UI in a React project: A step-by-step guide

I am currently developing a project using React (along with TypeScript) and the Material-UI library. One of my requirements is to implement an animated submit button, while replacing the default one provided by the library. After some research, I came acr ...

Displaying images in a carousel below a fixed navigation bar using Bootstrap

Check out my website at When viewing on smaller screens like mobile devices, I'm facing issues with my carousel images overlapping the navbar. Any suggestions on how to keep them below the navbar? Also, the third image appears shorter in length compa ...

Error message: Python HTML Parsing with UnicodeDecodeError

When utilizing html.parser from the HTMLParser class to extract data from a set of html files, everything works smoothly until an error is triggered by a specific file: UnicodeDecodeError: 'utf-8' codec can't decode byte 0x8a in position 41 ...

Securing your Angular2 application with TypeScript for enhanced safety

Looking to create a web application using Angular2 with TypeScript. After researching authentication in Angular2, it seems I need to include the following components: index component (public) login component (public) my private component (private) Thes ...

What causes the inability to separate the span size from the parent div when enlarging the span width?

Check out this Relevant Fiddle: https://jsfiddle.net/promexj1/1/ I'm working on adjusting the widths of two child spans within a parent div to be slightly smaller than the parent itself (due to starting translation 10px to the right for one of the sp ...

How can you use jQuery to select and manipulate a wildcard href ID?

There are multiple links listed below: <a href="http://www.google.com" id="link01">Google</a> <a href="http://www.yahoo.com" id="link02">Yahoo</a> <a href="http://www.cnn.com" id="link03">CNN</a> <a href="http://www. ...

Creating a release of an Angular 12 library using Ivy and sharing it on npm

Recently, I had the task of updating a library to angular 12. After successfully compiling it with Ivy full compilation mode, I realized that it cannot be published on npm in this state. Following suggestions from various sources, I tried setting "enableI ...

Personalizing CSS for showcasing bot icon next to bot reply container

I'm currently working on modifying the layout of this HTML page. I want to include a bot icon next to each bot response, and I also need to decrease the space between consecutive messages. https://i.sstatic.net/lBiMD.png Any suggestions on how I can ...

Why does the property of {{hero.name}} function properly in a <h> tag but not in an <img> tag?

Within this template, the code below functions correctly: <h3>{{hero.name}}</h3> It also works for: <a routerLink="/details/{{hero.id}}">{{hero.name}}</a> However, there seems to be an issue with the following image path ...

The directive within the module was not carried out

After setting up a fresh module in my Angular 8 project and adding a new directive to it, nothing seemed to happen at runtime (although the compilation was successful). I even added console logs to the directive to check if it was being executed different ...

Constructing a hierarchical tree structure using an array of objects that are initially flat

My goal is to create a hierarchical tree structure from a flat array: The original flat array looks like this: nodes = [ {id: 1, pid: 0, name: "kpittu"}, {id: 2, pid: 0, name: "news"}, {id: 3, pid: 0, name: "menu"}, {id: 4, pid: 3, name: ...

What is the solution to making flexbox align-items flex-end work in WebKit/Blink?

I'm attempting to embed one flexbox within another flexbox. The outer box is aligned vertically: +------+ | | +------+ | | | | | | +------+ The top section adjusts to fit the content with flex 0 1 auto, while the bottom half occu ...

Populate the row with an image while maintaining its size

I have encountered an issue with containing images within a Bootstrap row. When I insert an image, it does not stay contained within the row and instead overflows causing scrollbars to appear. My goal is to have the image fit seamlessly into the container ...

Show varying HTML headers on the initial page as opposed to subsequent pages

Currently, I am utilizing an HTML to PDF Library known as Nreco for converting HTML Pages into PDF format. The task at hand involves implementing a consistent header on every page, with the exception of the first page that should display the Recipient Addr ...