Tips on incorporating a style-tag into the body of an Angular 5 application

Question

Tips on incorporating a style-tag into the body of an Angular 5 application

We offer a service that collects a vast amount of data to be displayed in an angular 5 application. The model used for displaying this data is constantly evolving and shared across multiple applications, so I need to import it dynamically.

My approach involves querying the model in a service, passing it to the necessary components, and having them display it as CSS rules.

The process of generating CSS rules within the component is successful, resulting in a variable holding a string containing all the rules:

this.css

In my HTML code, I attempted the following:

<style>
  {{css}}
</style>

Unfortunately, regardless of what I try, the style tags are always removed.

Why are they being removed? How can I resolve this issue? Is there an alternative method, such as providing the styles to Angular for inclusion in the header?

css angular angular5

Answer 1

Answer №1

To enhance the Component HTML, it is important to sanitize the <style> element.

Angular offers the DomSanitizer service that can be found within the @angular/platform-browser package.

The recommended approach is as follows:

When writing the HTML code, use the following snippet:

 <div [innerHTML]="getStyles()"></div>

For the Typescript method, implement it like this:

getStyles(){
    return this.domSanitizer.bypassSecurityTrustHtml(this.styles);
}

Please note: In my implementation, the value of

styles = `<style>
                body {background-color: red;}
                h1   {color: blue;}
                p    {color: red;}
          </style>`

Check out the LIVE DEMO

Answer 2

To enhance the Component HTML, it is important to sanitize the <style> element.

Angular offers the DomSanitizer service that can be found within the @angular/platform-browser package.

The recommended approach is as follows:

When writing the HTML code, use the following snippet:

 <div [innerHTML]="getStyles()"></div>

For the Typescript method, implement it like this:

getStyles(){
    return this.domSanitizer.bypassSecurityTrustHtml(this.styles);
}

Please note: In my implementation, the value of

styles = `<style>
                body {background-color: red;}
                h1   {color: blue;}
                p    {color: red;}
          </style>`

Check out the LIVE DEMO

Answer 3

Answer №2

Using a pure JavaScript function, I was able to generate a fresh stylesheet and include my custom rules within it.

Answer 4

Using a pure JavaScript function, I was able to generate a fresh stylesheet and include my custom rules within it.

Tips on incorporating a style-tag into the body of an Angular 5 application

Answer №1

Answer №2

Similar questions

What are the best practices for integrating PrimeVue with CustomElements?

Encountering a Cross-Origin Resource Sharing issue involving the Access-Control-Allow-Origin * setting in NodeJS and Angular

Avoid using the FONT tag with the execCommand function

What steps are needed to adjust a modal window so that it perfectly fits the size of the image it contains?

I'm new to Angular and I'm wondering how to close the panel by clicking on the 'x' button and also by clicking on the screen. Can anyone help me with this

A plethora of color choices in a Multi-select Box

Tips for injecting scripts into the head tag after an Angular component has been loaded

Dim the brightness of an image on Internet Explorer

What is the reason behind opting for ng-style over style in AngularJS for applying CSS formatting?

Tips for showcasing an image partially with primefaces/jsf

Tips for rearranging sibling divs while maintaining the order of their child elements

Dynamic Motion of HTML Elements

Is there a way to conceal the scrollbar while still permitting scrolling?

Adjusting the sidebarPanel height to match the mainPanel content in a shiny app

Ways to make the submenu display underneath the main menu

Is there a way to identify which elements are currently within the visible viewport?

Develop a dynamic button using JavaScript to fetch information from an array

Error: The Vue bind object property cannot be read because it is undefined in the class binding

Combining one item from an Array Class into a new array using Typescript

In Angular 2+, as you loop through an array of objects, make sure to create a new row (<tr>) for each property of the object