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">×</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.
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>`
}
}
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. ☺
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