A safe value should use [property] = binding after protection against crawling 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 that mass_timings displays includes the text: -

A safe value should use [property] = binding

at the beginning

How to delete this line.

Answer 1

As the error message says, sanitized HTML must be added using property bindings:

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

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

Answer 2

I was getting this error when using iframe, so I fixed it with [src]as shown below:

//In ts file
getSafeUrl() {
        return this.sanitizer.bypassSecurityTrustResourceUrl(this.url);     
}
//In html
<iframe [src]="getSafeUrl()" frameborder="0" *ngIf="url"></iframe>