I simply need to inject HTML in a div with id "main-wrapper", so in my component.ts i am using this code
import { Component, OnInit, ElementRef,Renderer2,Inject } from '@angular/core'; import { Pipe } from '@angular/core'; import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser'; @Component({ selector: 'app-editsection', templateUrl: './editsection.component.html', styleUrls: ['./editsection.component.css'] }) export class EditsectionComponent implements OnInit { ...//some code constructor( @Inject(DOCUMENT) private document: any, private route: ActivatedRoute, private elRef: ElementRef, private el: ElementRef, private _sanitizer:DomSanitizer ) { } ngOnInit() { var strHTML = '<p>abc<p>'; this.document.getElementById("main-wrapper").innerHTML += this._sanitizer.bypassSecurityTrustHtml(strHTML); ... } }
When i run the code it says: SafeValue must use [property]=binding: abc
(see http://g.co/ng/security#xss)
Why i need to implement this- Because when i am injecting innerHTML, i am loosing a property contenteditable="true"
Before applying innerHTML, my code looks as shown below:
<h1 _ngcontent-c2 contenteditable="true">Hii<h2>
After applying innerHTML it becomes:
<h1 _ngcontent-c2>Hii<h2>
Please help me resolve the problem
The whole methodology behind angular is anchored on reduction of DOM manipulation via script (such as what you have) as recommended in http://angularjs.blogspot.com.au/2016/04/5-rookie-mistakes-to-avoid-with-angular.html.
There are very few circumstances where manipulating the DOM directly is necessary. Angular 2 provides a set of powerful, high-level APIs like queries that one can use instead. Leveraging these APIs confers a few distinct advantages
...
When you manipulate the DOM manually, you miss out on these advantages and ultimately end up writing less expressive code.
So instead of using this: this.document.getElementById("main-wrapper").innerHTML +=
You should make use of the templating engine / structural directives like *ngFor *ngIf inherent in angular.
// .html <div class="main-wrapper"><p *ngIf="showabc">abc</p></div> // .ts var showabc: Boolean = true;
As per your comment:
You are loading a bunch of html from localstorage. In this case, you will have to manipulate the DOM. Ideally i would recommend re-configuration of this architecture for performance purposes as stated in the aformentioned.
1st, load the html into typescript...
public possibleHTML: Array; constructor(private sanitizer: DomSanitizer){} ngOnInit(){ this.possibleHTML = loadContentFromLocalStorage(); this.possibleHTML = this.possibleHTML.map(value => this.sanitizer.bypassSecurityTrustHtml(value)); }
2nd insert the html.
<div class="main-wrapper"> <content *ngIf="possibleHTML"> <div *ngFor="let html of possibleHTML"> <div *ngIf="html.makevisible" [innerHtml]="html"></div> </div> </content> </div>
drawbacks: css styling does not take effect unless it is defined as a global stylesheet styles.css instead of editsection.component.css.
