When attempting to create a link like this:
<a [href]="getUrl()">click me</a>
getUrl() {
return this.domSanitizer.bypassSecurityTrustUrl('http://sampleUrl.com');
}
The link is not clickable. When hovering over the link, the URL is visible but the click event does not seem to work.
Whether using the sanitizer method or not, there doesn't seem to be any difference.
Edit:
Let me provide some additional context on what I am trying to achieve. I simply need to dynamically append some HTML. Initially, I tried this:
<div [innerHTML]="getHtml()"
getHtml() {
return this.domSanitizer.bypassSecurityTrustHtml(html);
}
However, when doing it this way, the links are broken and can only be opened with right-click menu. Without using bypassSecurityTrustHtml method, the links work but styling is mostly lost.
So far, I have also attempted:
for (const el of this.div.nativeElement.getElementsByTagName('a')) {
// like this
this.renderer.listen(el, 'click', () => {this.getUrl()});
// or like this
el.onclick = function (event) {
window.open('http://testurl.com');
};
}
But none of these methods seem to work.
What does work:
// for some reason, links work with this
changeDetection: ChangeDetectionStrategy.OnPush
Although this solution solves my problem, I am not fond of it:
@HostListener('mouseup', ['$event'])
onClick(event) {
if(event.target && event.target.href) {
window.open(event.target.href);
}
}