Add (click) method to link in text block in Angular component - html

Question

I have a small problem. I'm getting a text from the server with innerHtml which is inserted in Angular component. Inside of this text, there are possibly some links. Example text block looks like this:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<a href="some.link.com">Link<a/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Is there a way to insert a bind there a click action like this?
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<a href="some.link.com" (click)="methodName('http://domain.tld/page.html')">Link<a/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Thanks.

Answer 1

If I get you right, you render html loaded from server with innerHtml, in this case you can't use Angular directives inside of this template. But you can add listeners with common JS (document.addEventListener) after content rendering.
#Component({
template: `<div #wrapper [innerHTML]="sanitizedHtml"></div>`
}) class MyComp {
#ViewChild('wrapper') wrapper: ElementRef<HtmlElement>;
ngAfterViewInit() {
const links = this.wrapper.naviveElement.querySelectorAll('a[href]');
links.forEach(link =>
link.addEventListener('click', this.linkClickHandler.bind(this));
);
}
linkClickHandler(event: MouseEvent) {
...
}
}

Answer 2

For dynamic links you can bind your desired url link in you a tag like the following
<a [href]="some.url">Link</a>
If some is an object.
For click event you can have something like
method(url: string) {
window.location.href = url;
}
then you'll pass your url string like (click)="method('http://domain.tld/page.html')"