Conditional url with ternary operator in anchor tag href throws Parse Error Angular

Issue

Good day developers. I´m trying to set dynamically a URL for my anchor tag href in a html template but I´m receiving this error:

Parser Error: Got interpolation ({{}}) where expression was expected at column 30 in 
[somevariable?['/somelink/{{ some.id }}?someparam={{ paramid }}&origin=origin']:'']

the href would be redirecting to an URL if some random variable of boolean type has a true value, thus:

 <a [href]="(somevariable)?('/somelink/{{ some.id }}?someparam={{ paramid }}&origin=origin'):''">
 </a>         
        

is there a better approach for this?…thanks in advance

Solution

You can change your interpolation to this:

<a href="{{ somevariable ? '/somelink/' + some.id + '?someparam=' + paramid + '&origin=origin' : '' }}">

But your anchor tag could end up without a link if somevariable is false. So I would suggest you instead hide the anchor tag in that instance using *ngIf:

<a *ngIf="somevariable" href="{{ '/somelink/' + some.id + '?someparam=' + paramid + '&origin=origin' }}">

Additionally, I would suggest you use routerLink instead href if /somelink/... is a route in your app so your app does not reload when the user follows (clicks on) the link.

Answered By – Frank Fajardo

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published