Angular 2 - innerHTML styling

Question

I am getting chunks of HTML codes from HTTP calls. I put the HTML blocks in a variable and insert it on my page with [innerHTML] but I can not style the inserted HTML block. Does anyone have any suggestion how I might achieve this?

@Component({
  selector: 'calendar',
  template: '<div [innerHTML]="calendar"></div>',
  providers: [HomeService], 
  styles: [`h3 { color: red; }`]
})

The HTML that I want to style is the block contained in the variable "calendar".

Mowery

Style from where? From within the component or from styles added to index.html? – Tournai

what do you mean by can not style the inserted HTML block? Show us what have done for it with small snippet of code. – Unrobe

@GünterZöchbauer what if the HTML codes have inline css ? how will it be rendered ? – Undine

What HTML codes? Angular component templates? I think CSS links and <style> tags are just stripped. – Tournai

I found this Angular 2 documentation. Explains all kinds of ':host' and '/deep/' selectors. – Did

Answer 1

update 2 ::slotted

::slotted is now supported by all new browsers and can be used with ViewEncapsulation.ShadowDom

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

update 1 ::ng-deep

/deep/ was deprecated and replaced by ::ng-deep.

::ng-deep is also already marked deprecated, but there is no replacement available yet.

When ViewEncapsulation.Native is properly supported by all browsers and supports styling accross shadow DOM boundaries, ::ng-deep will probably be discontinued.

original

Angular adds all kinds of CSS classes to the HTML it adds to the DOM to emulate shadow DOM CSS encapsulation to prevent styles of bleeding in and out of components. Angular also rewrites the CSS you add to match these added classes. For HTML added using [innerHTML] these classes are not added and the rewritten CSS doesn't match.

As a workaround try

• for CSS added to the component

/* :host /deep/ mySelector { */
:host ::ng-deep mySelector { 
  background-color: blue;
}

• for CSS added to index.html

/* body /deep/ mySelector { */
body ::ng-deep mySelector {
  background-color: green;
}

>>> (and the equivalent/deep/ but /deep/ works better with SASS) and ::shadow were added in 2.0.0-beta.10. They are similar to the shadow DOM CSS combinators (which are deprecated) and only work with encapsulation: ViewEncapsulation.Emulated which is the default in Angular2. They probably also work with ViewEncapsulation.None but are then only ignored because they are not necessary. These combinators are only an intermediate solution until more advanced features for cross-component styling is supported.

Another approach is to use

@Component({
  ...
  encapsulation: ViewEncapsulation.None,
})

for all components that block your CSS (depends on where you add the CSS and where the HTML is that you want to style - might be all components in your application)

Update

Example Plunker

Lai

Do you know if there is a way to group more than one css element with only one :host>>> tag? I've also tried to used the :host>>> tag in an external css file but i cant get that to work. Do you know if this is possible? – Mowery

What do you mean by "group more than one css element"? If you add the external CSS using styleUrls: [...] to the component, then it should work with external styles as well. – Tournai

Just a note for anyone, this doesn't work either with node-sass, or with the styleUrl. Only in the styles:[...] – Reboant

@thouliha this seems to be an issue with your configuration. Angular doesn't treat styles and styleUrls differently. – Tournai

Note, this method does NOT work if you are using angular-cli and SASS or SCSS for your styling. You must use regular CSS for it to work. – Lucretialucretius

With SASS use /deep/ instead of >>> – Tournai

What would the recommendation be for rendering the styles of attribute directives in innerHTML? For example, el.nativeElement.style.backgroundColor = 'yellow';, as shown in the documentation example here. – Rutan

You can'r have directives or compinents in content added with inneeHTML – Tournai

If the HTML provided by HTTP call is big and it has inline css how will that be possible as I dont have the styles predefined, I am getting it from the inline css only @GünterZöchbauer – Undine

I don't know. I would try to avoid that in the first place, and was able to do it so far myself. I use only static component templates that are fully known at build time (I'm using Dart, and with Dart this is the only supported way anyway). Perhaps you should create a new question with more details about your use case. – Tournai

I get core.js:1633 ERROR cordova_not_available in browser, after adding the import of {ViewEncapsulation} from '@angular/core'; – Ingham

Saved the day in Angular 8! Thanx. It's hard to get the question right in order to find this answer! – Dannettedanni

ViewEncapsulation.None helped to fix it in Angular 8 – Usk

Answer 2

The simple solution you need to follow is

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

constructor(private sanitizer: DomSanitizer){}

transformYourHtml(htmlTextWithStyle) {
    return this.sanitizer.bypassSecurityTrustHtml(htmlTextWithStyle);
}

Centillion

This does allow a text to be written in the innerHTML, but CSS still doesn't reach it. – Bouncer

@JeremyThille I'm facing an issue related to what you mentioned, I'm not able to style a <ul> list, I was using Emulated and ::ng-deep but, although it works, it is deprecated. Do you know how to make the CSS reach it? – Fusion

I use encapsulation: ViewEncapsulation.None (as described in an above answer) and then CSS reaches the sub-component – Bouncer

You should improve the answer adding all necessary steps to make it work – Numbers

This does not work, I've tried. It returns this error: #39858358 . There is also the solution – Atomy

Answer 3

We pull in content frequently from our CMS as [innerHTML]="content.title". We place the necessary classes in the application's root styles.scss file rather than in the component's scss file. Our CMS purposely strips out in-line styles so we must have prepared classes that the author can use in their content. Remember using {{content.title}} in the template will not render html from the content.

Bonehead

Answer 4

If you're trying to style dynamically added HTML elements inside an Angular component, this might be helpful:

// inside component class...
    
constructor(private hostRef: ElementRef) { }
    
getContentAttr(): string {
  const attrs = this.hostRef.nativeElement.attributes
  for (let i = 0, l = attrs.length; i < l; i++) {
    if (attrs[i].name.startsWith('_nghost-c')) {
      return `_ngcontent-c${attrs[i].name.substring(9)}`
    }
  }
}
    
ngAfterViewInit() {
  // dynamically add HTML element
  dynamicallyAddedHtmlElement.setAttribute(this.getContentAttr(), '')
}

My guess is that the convention for this attribute is not guaranteed to be stable between versions of Angular, so that one might run into problems with this solution when upgrading to a new version of Angular (although, updating this solution would likely be trivial in that case).

Edelstein

This is the only solution that worked for me in Angular 9 without breaking the encapsulation of the view. I've been after this solution for quite a while now. Thanks. – Archenemy

Answer 5

Use the below method to allow CSS styles in innerhtml.

import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
.
.
.
.
html: SafeHtml;

constructor(protected _sanitizer: DomSanitizer) {
   this.html = this._sanitizer.bypassSecurityTrustHtml(`
        <html>
        <head></head>
        <body>
           <div style="display:flex; color: blue;">
              <div>
                 <h1>Hello World..!!!!!</h1>
              </div>
           </div>
        </body>
        </html>`);
}

Example code stackblitz

Or use the below method to write directly in HTML. https://gist.github.com/klihelp/4dcac910124409fa7bd20f230818c8d1

Coltin

Answer 6

The recommended version by Günter Zöchbauer works fine, but I have an addition to make. In my case I had an unstyled html-element and I did not know how to style it. Therefore I designed a pipe to add styling to it.

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';


@Pipe({
    name: 'StyleClass'
})
export class StyleClassPipe implements PipeTransform {

    constructor(private sanitizer: DomSanitizer) { }
    transform(html: any, styleSelector: any, styleValue: any): SafeHtml {
        const style = ` style = "${styleSelector}: ${styleValue};"`;
        const indexPosition = html.indexOf('>');
        const newHtml = [html.slice(0, indexPosition), style, html.slice(indexPosition)].join('');
        return this.sanitizer.bypassSecurityTrustHtml(newHtml);
    }

}

Then you can add style to any html-element like this:

<span [innerhtml]="Variable | StyleClass: 'margin': '0'"> </span>

With:

Variable = '<p> Test </p>'

Greenburg

Answer 7

For anyone that wants just applies a certain style to innerHTML :

Follow Create a safe HTML pipe

And you can concat your HTML string with CSS style like this:

return this.sanitizer.bypassSecurityTrustHtml(value+='<style type="text/css">.image img { width: 100% }</style>');

This value is from transform(value, ...args)

Preconscious

Answer 8

The easiest and most straight forward is to use the global styles file located in angular project src folder.

Assuming the component selector is: app-my-component

Add a class to the element hosting the innerHtml content in app-my-component template:

<div class="innerhtml-class" [innerHTML]="variable.innerHtml"></div>

Add to the global styles file:

app-my-component { 
 .innerhtml-class { 
   declaration goes here 
 } 
}

Contrived

This only works if the rule you are writing is not overwriting some other preset rule. In our case the innerHTML comes with p tags and these are predefined by our framework. Without ng-deep, the overwriting of the rule for the p tags will not work. – Alesandrini

@FilipeMelo can you give me an example of the received innerHTML and what you are looking to achieve; I don't think I understand what you mean?. I have used my answer to style elements within the received innerHTML which included p and span tags. – Contrived

Answer 9

An alternative to use CSS classes inside [innerHTML] is to declare them in global file like styles.scss. This file is specified in angular.json

        "styles": [
          "./node_modules/flexboxgrid/dist/flexboxgrid.min.css",
          "src/styles.scss"
        ],

Haddington

Answer 10

Include the css to your styles.scss as a global style

Gorga

Answer 11

I went the this.sanitizer.bypassSecurityTrustHtml() route initially, and set encapsulation to ViewEncapsulation.NONE, but had 2 problems:

1. ViewEncapsulation.NONE was causing other styling issues in my component
2. My "safe" html didn't appear to work with css variables, ie var(--blue)

This worked for me (without having to change anything else): InsertAdjacentHTML

Template:

<div id=template></div>

Code:

ngOnInit() {
  const el = document.getElementById('template');
  el.insertAdjacentHTML('afterbegin', `<span style="color: var(--blue)">hello</span>`);
}

Disclaimer: In my case, I was parsing html from config files. You wouldn't want to go this route with user inputted html.

Tarazi

Answer 12

Using inline CSS variables is an alternative solution if you have limited styles that are dynamic.

I.e.

// file.ts
someVarWithHtml = 'Hello <span class="dynamic">World</span>';

// file.ng.html
<div [style]="'--my-var: ' + value"
     [innerHTML]="someVarWithHtml"></div>

// style.css
.dynamic {
  background: var(--my-var);
}

Photodrama

Answer 13

If you are using sass as style preprocessor, you can switch back to native Sass compiler for dev dependency by:

npm install node-sass --save-dev

So that you can keep using /deep/ for development.

Kahler