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-componentStep 2: Create a Component
Create a component so we can use insert the style tag in it dynamically.
ng g c test-styleimport { 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>