Angular2 join string in expression

I would like to join a string in an expression in Angular2, though seem unable to do so. (Specifically in the attr.href of the a tag.

For example, assume that I have a url made of ‘/page/id’, and the ID is stored in a variable.

   <a [attr.href]="/page/{{id}}">link</a> 

This will not work, because we can not use {{}} syntax in an expression.

I am not sure how I would go about joining strings here.

2
Leave a Reply

avatar
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

You could try this:

<a [attr.href]="'/page/' + id">link</a>

Since in this case you can’t use interpolation (because of [...]). Angular2 will try to evaluate the expression and you can use string value delimited with quotes here.

Jason
Guest

You can’t use [...] and {{..}} together either

 <a attr.href="/page/{{id}}">link</a> 

or

 <a [attr.href]="'/page/' + id">link</a> 

There is no need for attr because the href property reflects to the href attribute automatically (Plunker example).

 <a href="/page/{{id}}">link</a>