How can I conditionally use either [href] or [routerLink] on an anchor?

Question

I need for the same anchor link to be pointed conditionally locally or to external resource. I tried

<a [href]="outside?externalUrl:null"  [routerLink]="outside?[]:['/route',id]" >test</a> 

But it doesn't work. I don't get any errors, but it points to the same local page and ignores the external URL. Any ideas?

Another option would be to construct the link, but I can't find any docs how to access routerLink inside a service

Edit: I know I can clone the whole link with *ngIf but I don't want to do it, my link contains a video tag with a buch of options

Answer 1

The simplest way would be to use *ngIf / else:

<ng-container *ngIf="outside; else internalBlock">   <a [href]="externalUrl">External</a> </ng-container>  <ng-template #internalBlock>   <a [routerLink]="['/route', id]">Internal</a> </ng-template> 

EDIT#1: (Ugly workaround)

Since you don't want to use *ngIf (I still don't understand why), you can do this:

Template:

<a href="javascript:void(0)" (click)="handleClick(outside, '/route', id, externalUrl)">Link</a> 

Component:

handleClick(outside: boolean, internalUrl: string, internalId: string, externalUrl: string): void {   if (outside) {     window.location.href = externalUrl;     // You can also use Location class of Angular   } else {     this.router.navigate([`${internalUrl}/${internalId}`]);   } }