Angular: pipe that transforms text to create hyperlink elements with stop propagation doesn't work

Question

I want to have something that finds URLs in text and make them clickable. So to achive this I have created a custom pipe:

@Pipe({
  name: 'urlify'
})
export class UrlifyPipe implements PipeTransform {
  transform(text: any): any {
    const urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z\d+&@#/%?=~_|!:,.;]*[-A-Z\d+&@#/%=~_|])/ig;

    return text.replace(urlRegex, (url) => {
      return '<a href="' + url + '">' + url + '</a>';
    });
  }
}

And that works as expected when I use it together with <div [innerHtml]="someText | urlify">

But the problem is that in some cases wrapping div is clickable so I have to stopPropagation and preventDefault on <a> element.

So I have created a directive for that:

@Directive({
  selector: '[sfStopPropagation]'
})
export class StopPropagationDirective {
  @HostListener("click", ["$event"])
  public onClick(event: any): void {
    event.preventDefault();
    event.stopPropagation();
  }
}

And than just use this in the pipe return '<a sfStopPropagation href="' + url + '">' + url + '</a>';

The problem is that is not working at all. I even tried to create a method in the pipe file and call it on click for the element but it also doesn't work (the same with ${ }):

And this is an example where I'm using it:

Can someone help me?