Skip to content
Readerstacks logo Readerstacks
  • Home
  • Softwares
  • Angular
  • Php
  • Laravel
  • Flutter
Readerstacks logo
Readerstacks
How to Insert style tag dynamically in html in angular

How to Insert Style Tag Dynamically in Angular ?

Aman Jain, August 4, 2022March 16, 2024

Sometimes we want to insert style tag in angular app, For an instance we have third party APIs or widget and we wanted to add it in our page then in this condition provided script and style are not angular friendly or we can say it can be pure JavaScript or Style. so to insert this type of style we need to load it dynamically in our Dom.

In angular we can add those style in two ways first one is using the pure javascript way and other in angular way which also work on server application.

Let’s discuss the both way to Insert style tag dynamically in html in angular

Load style tag url using pure javascript in component

In this way we will create a component and then load the style in Dom so it can work as expected as below

loadScriptByUrl(url, afterload) {
    let dynamicScript = document.createElement('style');
    dynamicScript.type = 'text/css';
    dynamicScript.async = true;
    dynamicScript.src = url;
    dynamicScript.id = 'dynamic_' + this.count;
    document.body.appendChild(dynamicScript);
    this.count++;

    dynamicScript.addEventListener('load', () => {
      afterload(dynamicScript, dynamicScript.id);
    });
  }

Load style tag text using pure javascript in component

In this way we will create a component and then load the script in Dom so it can work as expected as below

loadScriptByUrl() {
  let dynamicScript = document.createElement("style");
  dynamicScript.type = "text/css";
  dynamicScript.async = true;
  dynamicScript.text = "body{color:red}";
  document.body.appendChild(dynamicScript);
}

Understand it with an example

Step 1 : Create an angular app

First step is to setup an angular app using below command

ng new example-component

Step 2: Create a Component

Create a component so we can use insert the style tag in it dynamically.

ng g c test-style
import { Component, OnInit, Input } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-test-style',
  templateUrl: './test-style.component.html',
  styleUrls: ['./test-style.component.css']
})
export class TestStyleComponent implements OnInit {
   
  constructor() { }

  ngOnInit() {

  }

}

Step 3 : Add loadStyleUrl method to component

Now add the logic for adding style tag in component in JavaScript way

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test-style',
  templateUrl: './test-style.component.html',
  styleUrls: ['./test-style.component.css'],
})
export class TestStyleComponent implements OnInit {
  count = 0;
  constructor() {}

  ngOnInit() {
    
    this.loadStyletByUrl(
      'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css',
      function (scriptref, id) {
        
        // do your work after load
      }
    );
  }

  loadStyletByUrl(url, afterload) {
    let dynamicScript = document.createElement('style');
    dynamicScript.type = 'text/css';
    dynamicScript.async = true;
    dynamicScript.src = url;
    dynamicScript.id = 'dynamic_' + this.count;
    document.body.appendChild(dynamicScript);
    this.count++;

    dynamicScript.addEventListener('load', () => {
      afterload(dynamicScript, dynamicScript.id);
    });
  }
 
}

Or in Angular server side rendering

import { DOCUMENT } from '@angular/common';
import { Component, Inject, OnInit, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-test-style',
  templateUrl: './test-style.component.html',
  styleUrls: ['./test-style.component.css'],
})
export class TestStyleComponent implements OnInit {
  count = 0;
  constructor(
    private _renderer2: Renderer2,
    @Inject(DOCUMENT) private _document: Document
  ) {}

  ngOnInit() {
    
    this.loadStyleByAngularWay(
      'alert("Dynamic loaded SSR")',
      function (scriptref, id) {
       
        // do your work after load
      }
    );
  }

   
  public loadStyleByAngularWay(text,afterload) {
    let script = this._renderer2.createElement('style');
    script.type = `text/css`;
    script.text = text;

    this._renderer2.appendChild(this._document.body, script);
    script.addEventListener('load', () => {
      afterload(script);
    });
  }
}

Here we added both way using loadStyleByAngularWay and loadStyleByUrl method, also we added callback so we can only run the external style method after load.

we added a library to format input field https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css

Step 4 : Add html in template

Add simple html in template so we can test our implementation

<p>
  test-style works!

  
</p>

Related

Javascript Angular angulardynamicscript

Post navigation

Previous post
Next post

Related Posts

Javascript Angular Focusout Event on Input Example

Angular Focusout Event on Input Example

September 24, 2022March 16, 2024

Angular Focusout Event on Input is an Angular event binding it triggers when user interacts with DOM like text based input element and focus get out from the element. Input events in angular can be handled using input and output decorators and in this tutorial we will learn Angular FocusOut…

Read More
Javascript Laravel Multi Select Tag Autocomplete Using Select2

Laravel Multi Select Tag Autocomplete Using Select2

July 19, 2022July 19, 2022

In this article we will learn to use Laravel Multi Select Tag Autocomplete Using Select2. Select2 is useful when we want live search of bulk data or to convert the existing select boz with multi features like search, multi select and options customizations. In this article we will cover multiple…

Read More
Javascript ngFor and For loop over object or Array in angular

ngFor and For loop over object or Array in angular

March 30, 2022October 4, 2022

Loops are used to iterate through objects or array, In angular we can use ngFor and For loop over array or object in angular, ngFor is a template structural directive which is used to iterate a loop in template file whereas for and each is used to iterate the loop…

Read More

Aman Jain
Aman Jain

With years of hands-on experience in the realm of web and mobile development, they have honed their skills in various technologies, including Laravel, PHP CodeIgniter, mobile app development, web app development, Flutter, React, JavaScript, Angular, Devops and so much more. Their proficiency extends to building robust REST APIs, AWS Code scaling, and optimization, ensuring that your applications run seamlessly on the cloud.

Categories

  • Angular
  • CSS
  • Dart
  • Devops
  • Flutter
  • HTML
  • Javascript
  • jQuery
  • Laravel
  • Laravel 10
  • Laravel 11
  • Laravel 9
  • Mysql
  • Php
  • Softwares
  • Ubuntu
  • Uncategorized

Archives

  • May 2025
  • April 2025
  • October 2024
  • July 2024
  • February 2024
  • January 2024
  • December 2023
  • November 2023
  • October 2023
  • July 2023
  • March 2023
  • November 2022
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021

Recent Posts

  • Understanding High Vulnerabilities: A Deep Dive into Recent Security Concerns
  • Understanding High Vulnerabilities in Software: A Week of Insights
  • Blocking Spam Requests with LaraGuard IP: A Comprehensive Guide
  • Enhancing API Development with Laravel API Kit
  • Exploring the Future of Web Development: Insights from Milana Cap
©2023 Readerstacks | Design and Developed by Readerstacks
Go to mobile version