Inline styling in Angular2

Question

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

@Component({
  selector: 'my-app',
  template: `
    <input type="text" [(ngModel)]="html">
    <div [innerHtml]="html">
    </div>
})
export class App {
  name:string;
  html: string;
  constructor() {
    this.name = 'Angular2'
    this.html = "<span style=\"color:red;\">1234</span>";
  }
}

In the above example 1234 is not coming red.

Here is the plnkr

Please add the code to your question that demonstrates what you are trying to accomplish, what you tried and where you failed. Perhaps a Plunker that allows to reproduce? — Günter Zöchbauer, Mar 10 '17 at 08:29
@GünterZöchbauer in http://stackoverflow.com/questions/36265026/angular-2-innerhtml-styling see your first comment (in that from within the component) — iniravpatel, Mar 10 '17 at 09:27
I asked you to create a question instead of a comment, because here you can add code ;-) — Günter Zöchbauer, Mar 10 '17 at 09:28

score 6 · Answer 1 · edited May 23 '17 at 11:54

6

  constructor(private sanitizer:DomSanitizer) {
    this.html = sanitizer.bypassSecurityTrustHtml("<span style=\"color:red;\">1234</span>");

Plunker example

See also

edited May 23 '17 at 11:54

Community

1
1

answered Mar 10 '17 at 09:51

Günter Zöchbauer

623,577
216
2,003
1,567

score 1 · Answer 2 · answered Mar 10 '17 at 10:45

1

Change your code in plunker as shown below :

import {Component, NgModule,ElementRef,ViewChild} from '@angular/core'

@Component({
  selector: 'my-app',
  template: `
    <input type="text" [(ngModel)]="html">
    <div [innerHtml]="html" #value>
    </div>
  `,
})
export class App {
  name:string;
  html: string;

  @ViewChild("value") el : ElementRef

  constructor() {
    this.name = 'Angular2'
    this.html = "1234";
  }
  ngOnInit(){
    this.el.nativeElement.style.color = "red";
  }
}

answered Mar 10 '17 at 10:45

Darshita

746
6
15

I would not accept this solution because this.html could be HTML code of a page which has 1000 divs and each div could have inline css. In that case this solution wont work. – iniravpatel Mar 10 '17 at 11:06
1

Don't touch nativeElement directly, use Renderer2 – TimTheEnchanter Nov 23 '17 at 01:51

Inline styling in Angular2

2 Answers2