Looking for assistance with a pipe issue. I've created the following custom SafeHtmlPipe:
import { DomSanitizer } from '@angular/platform-browser';
import { Pipe, PipeTransform, SecurityContext } from '@angular/core';
@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform {
constructor(private dom: DomSanitizer) {}
transform(value) {
return this.dom.sanitize(SecurityContext.HTML, value);
}
}
In my HTML file, I'm using the pipe like this:
<mat-dialog-content>
<div [innerHtml]="bodyContent | safeHtml"></div>
</mat-dialog-content>
In the corresponding .ts file, I set the body content as follows:
dialogRef.componentInstance.bodyContent = this.translateService.instant('dialog.upgrade_package_requested',
{
context: `${this.translateService.instant('dialog.context')}`,
name: `Yuhu`
});
This is what my translation key looks like in the translation file :
"upgrade_package_requested": "<p> Yuhuu <b>{{context}}</b>.<br /> Name <b>{{name}}</b>.</p><button mat-flat-button>Test</button>",
The result displays an image instead of interpreting the button as a clickable element. Any suggestions on how to fix this? Thank you for your help!