Angular 5-在新窗口中打开带有CSS类的链接

Question

I have a component that uses an observable and it calls a service to make an API call. The API returns some HTML, which is rendered in the view.

The HTML looks something like this:

<p>abc</p><a href=\"http://abc.xyz.com/\" class=\"external-link\" rel=\"nofollow\">
Click me to open in new window</a>

In Angular, is there a way to add some JS, such that anchors with "external-link" class open in a new window or tab?

Answer 1

If the external links appear somewhere in your component templates, you could simply create a directive to target them:

@Directive({
  selector: '.external-link'
})

But it sounds like the HTML is being dynamically inserted here. In that case, Angular won't be able to compile the HTML to apply the directive.

You could take advantage of event delegation and catch the click event on some parent component. You can catch any click events to external links and add target="_blank" :

@HostListener('click', ['$event'])
onClick({ target }) {
  if (target.classList.contains('external-link')) {
    target.setAttribute('target', '_blank');
  }
}

StackBlitz example.