Style not working for innerHTML in Angular

Styling dynamic content in Angular

There are general approaches we can take when the styles don't apply to innerHTML. These are largely centered around Angular's view encapsulation, global styles, and use of the DomSanitizer service.

Global styles: A universal solution

Submitting your styles to a global stylesheet ensures that they will be applied to your entire application, including dynamically rendered innerHTML. This can be compared to implementing a universal color scheme in an open-plan office - it affects all areas, regardless of the specificity of their task.

A word on view encapsulation

Changing encapsulation settings to None using ViewEncapsulation.None in your component decorator can also do the trick. This can be likened to tearing down office cubicles so you can have an open conversation.

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
  encapsulation: ViewEncapsulation.None // Be aware of potential style conflicts
})
export class MyComponent { }


DomSanitizer: A clean way to style

Angular offers the DomSanitizer service to bypass its security for values that are safe to use in given situations, including inline styles. Imagine it as a digital police officer 🚓, ensuring that every line of your code abides by the rules:

import { DomSanitizer } from '@angular/platform-browser';

// Inside your component
safeStyle: any;

constructor(private sanitizer: DomSanitizer) {  
  // Trust me! I'm an Engineer! 
  this.safeStyle = this.sanitizer.bypassSecurityTrustStyle('color: red');
}


The DomSanitizer allows to apply this safe style to your innerHTML content without worrying about security.

Enhancing your dynamic styling roadmap

Shifting focus from behaviors to targets

Craft specific classes for different pieces of innerHTML and define these in your global styles. That way, you hit the bull's eye without any detours.

<div [innerHTML]="myHtmlContent | safeHtml"></div>


/* Global styles.css */
.stylish-dynamic-color {
  color: red; // Red - For when you need code to run faster
}


Ensure that your myHtmlContent includes elements with the class .stylish-dynamic-color to apply the styles correctly.

Safety first: Trust the sanitizer

Sometimes, unavoidable inline styling can throw a spanner in the works. For these situations, remember the role of DomSanitizer. Use it as a safety net that catches any inline styles before they can cause harm:

trustedHtml = this.sanitizer.bypassSecurityTrustHtml(this.rawHtmlContent);


Maintaining strict security standards while achieving the desired styling outcome is the key.

Set your stage with the right encapsulation

See view encapsulation as setting the stage boundaries. Modifying these boundaries with ViewEncapsulation.None can be constructive but should be done with awareness of potential style conflicts.