CODEWITHSUNDEEP
angularangular2-templateinnerhtml
Manush
Manush

Reputation: 1942

how to append HTML content in angular 2 using innerHTML

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.

Upvotes: 10

Views: 43663

Answers (5)

Dilraj Singh
Dilraj Singh

Reputation: 1011

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 :)

Upvotes: 0

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657108

 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

Upvotes: 4

Rohan Fating
Rohan Fating

Reputation: 2133

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>`
  }
}

Upvotes: 11

Shubham Verma
Shubham Verma

Reputation: 9913

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.

Upvotes: 0

not_python
not_python

Reputation: 902

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. ☺

Upvotes: 8

Related Questions