I've been working with Angular 2 and TypeScript.
Everything was going well until I encountered an issue with my pipe, which is causing the DomSanitizer to interfere with the (click) event functionality.
Even though the (click) code appears intact in the HTML when I check it using console.log (F12), clicking on the link does not trigger any action.
Here is an example of the link that should call a function in my component:
<a (click)="recordLinkClick()" target="_blank" href="#">Test link</a>This is the specific pipe causing the issue:
import { Pipe } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';
@Pipe({
name: 'safe'
})
export class SafePipe {
constructor(protected _sanitizer: DomSanitizer) {
}
public transform(value: string, type: string = 'html'): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
switch (type) {
case 'html': return this._sanitizer.bypassSecurityTrustHtml(value);
case 'style': return this._sanitizer.bypassSecurityTrustStyle(value);
case 'script': return this._sanitizer.bypassSecurityTrustScript(value);
case 'url': return this._sanitizer.bypassSecurityTrustUrl(value);
case 'resourceUrl': return this._sanitizer.bypassSecurityTrustResourceUrl(value);
default: throw new Error(`Invalid safe type specified: ${type}`);
}
}
}
This is the particular line of HTML causing the problem:
<div [innerHTML]="selectedArticle.body | safe: 'html'"></div>If you require more code or information, please let me know.