I want to show a popup, when user click on a link that is external to angular application.
How do I check whether the url is external? E.g. pointing to the same domain, but different document
<a [href]="someUrl" appCheckExternalUrl>{{someUrl}}</a>
@Directive({
selector: '[appCheckExternalUrl]'
})
export class CheckExternalUrlDirective {
constructor(private el: ElementRef<HTMLAnchorElement>) { }
get url() { return this.el.nativeElement.href; }
get isExternalUrl() {
return ???;
}
}
The tricky part is that it depends on router settings.
Let's say my app is hosted in mydomain.com/myapp
and defines route /myroute
. Then:
mydomain.com/myapp/myroute
- internal routemydomain.com/anotherapp
- external route.
But if the router uses hashtag routing, then
mydomain.com/myapp/myroute
is external.
Also this url is also external, because it is not handled by application:
mydomain.com/myapp/assets/logo.png