how to append HTML content in angular 2 using innerHTML

Question

I use innerHTML to render HTML Content in my component. But innerHTML remove all the attributes (eg: removes style attributes) in the HTML content and renders it. But need to render as it is, and doesn't want to extract any attribute from the HTML content. Is there any equivalent to innerHTML or do we can accomplish the desired result with innerHTML. Thanks in Advance.

my template file

<div id="more-info-box" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Title</h4>
            </div>
            <div class="modal-body">
                <div class="clearfix">
                    <div [innerHTML]="htmlContent" class="long-desc-wrap">
                    </div>
                </div>
            </div>
         </div>
    </div>
</div><!-- End Info box -->

my component file

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


@Component({
  selector: 'cr-template-content',
  templateUrl: './app/channel.component.html'
})
export class TemplateComponent {
  constructor() {

  }

  htmlContent = '<p>This is my <strong style="color:red">Paragraph</strong></p>'

}

My current output is the content rendered without style attribute. But the desired result should be with style attribute.

Answer 1

you can directly inject inside your component html.

Plunker link:

https://plnkr.co/edit/lWR6q8?p=preview

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2 [innerHTML]="htmlContent"></h2>
    </div>
  `,
})
export class App {
  htmlContent:string;
  constructor() {
    this.htmlContent = `<p>This is my html coontent</p>`
  }
}

Answer 2

Using ViewChild.

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

create a local variable in the template

<div #div ></div>

query the local variable inside component class

@Component({...}) class MyComponent {
@ViewChild('div') div:ElementRef;
}

access native element inside any function

this.div.nativeElement.innerHTML ="something";

that's it. ☺

Answer 3

 import { DomSanitizer} from '@angular/platform-browser';
 .... 
 htmlContent:any;
    constructor(private sanitizer: DomSanitizer){
      this.htmlContent = this.sanitizer.bypassSecurityTrustHtml('<p>This is my <strong style="color:red">Paragraph</strong></p>');
}

or you can use a pipe like shown in https://stackoverflow.com/a/41089093/217408

Answer 4

I think the best idea to add html is, to create a directive:

test.directive.ts:

import { Directive,ElementRef } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Directive({
    selector: '[add-html]'
})

export class TestDirectives{
    constructor(el:ElementRef,private sanitizer:DomSanitizer,private elementRef:ElementRef){
            this.elementRef.nativeElement.innerHTML ='<h1>Hello World</h1>';
    }
}

and now your directive has been created and you will have add this directive into your app.module.ts like below:

app.module.ts:

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { TestDirectives } from '../directives/test.directive';


@NgModule({
  declarations: [
    AppComponent,
    TestDirectives
  ],
  imports: [],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

You will have to use your directive in your html, where you want to add this html, like in below code:

<div add-html></div>

Now see the output.

Answer 5

Create a variable in component.ts file

text:string;
ngOnInit(){
   this.text= "<p>This is new paragraph</p>"
}

And in component.html file add innerHTML attribute like I mentioned below:

<div [innerHTML]="text"></div>

It will append the text value inside the div

<div><p>this is new paragraph</p></div>

I hope it solves your problem :)