Safe value must use [property]=binding after bypass security with DomSanitizer

Question

<!--HTML CODE--> <p #mass_timings></p> 

//Controller code  @ViewChild('mass_timings') mass_timings: ElementRef; constructor(private domSanitizer:DomSanitizer) getInnerHTMLValue(){  this.mass_timings.nativeElement.innerHTML =     this.domSanitizer.bypassSecurityTrustHtml(this.parishDetail.mass_timings);  } 

but the output which the mass_timings is displaying is including the text:-

Safe value must use [property]=binding

at the beginning

How to remove this string.

Answer 1

As the error message says, the sanitized HTML needs to be added using property binding:

<p [innerHTML]="massTimingsHtml"></p> 

constructor(private domSanitizer:DomSanitizer) {   this.massTimingsHtml = this.getInnerHTMLValue(); } getInnerHTMLValue(){   return this.domSanitizer.bypassSecurityTrustHtml(this.parishDetail.mass_timings); } 

StackBlitz example (based on Swapnil Patwa's Plunker - see comments below)