Angular 2 Adding html dynamically to DOM, style not working [duplicate]

Question

Hello I am trying to add html from a file that is returned from the api, this is working. what I am needing help with is when I add an inline style it doesn't work, but if I create a class in the style.css it and add it to the html it then works.

All of this said, I need to get inline style working. I would like to get <span style="color:red;">I am red</span> working.

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <button (click)="onClick()">Click To Add Html</button>
    </div>
    <div *ngIf="html!==''" [innerHtml]="html"></div>
  `,
})
export class App {
  name:string;
  html:string=null;

  const htmlConst:string = `<span style="color:red;">I am red</span>`;
  /*
  I have tried [style] = "color:red;"
  style="color:red;"
  */
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }

  onClick():void{
    if(this.html !== ''){
      this.html= this.htmlConst;
    }
    else{
      this.html = '';
    }
  }
}

any advise would be helpful.

Answer 1

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

    @Component({
      selector: 'my-app',
      template: `
        <div>
          <h2>Hello {{name}}</h2>
          <button (click)="onClick()">Click To Add Html</button>
        </div>
        <div *ngIf="html!==''" [innerHtml]="html"></div>
      `,
    encapsulation: ViewEncapsulation.None
    })

Please refer from https://toddmotto.com/emulated-native-shadow-dom-angular-2-view-encapsulation