Angular2 - dynamic variable in html

Question

I have a list which looks like this:

<ul *ngFor="#item of items">
<li><img src="http://something.com/[this needs to be item.id]/picture"></li>
</ul>

I need to the image url to be that of the id of the item. I looked at the src documentation for angular2 (https://angular.io/docs/ts/latest/guide/template-syntax.html) and tried the following:

<img [src]="http://something.com/{{item.id}}/picture">

but it did not work. How can I have the image show up based on the item's id which needs to be in the url.

Mark Rajcok · Accepted Answer · 2016-03-29 21:28:09Z

6

Use property binding with string literals:

<img [src]="'http://something.com/' + item.id + '/picture'">

or string interpolation property binding with {{}}s:

<img src="http://something.com/{{item.id}}/picture">

Note that [src]="http://something.com/{{item.id}}/picture"> doesn't work because property binding with [] uses the syntax [property]="template_expression" and the template_expression can not contain {{}}s.

edited Mar 29, 2016 at 21:28

answered Mar 29, 2016 at 21:11

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Pankaj Parkar Over a year ago

I think 1st should appropriate, as like ng-src in Angular 1, where as 2nd one can form incorrect URL like http://something.com//picture, correct?

user2924127 Over a year ago

Thanks! It works! And thanks for explaining why my approach didn't work!

Mark Rajcok Over a year ago

@PankajParkar, well, both forms will generate incorrect URLs if id is not a property of the item. The first will produce "http://something.com/undefined/picture" and the second, "http://something.com//picture".

Pankaj Parkar Over a year ago

@MarkRajcok correct.. even that could failed if you don't have Elvis operator in a place.. like item?.id

Mark Rajcok Over a year ago

@PankajParkar, oh, okay, now I see your point. I believe both forms will result in invalid URL fetches if the id field is not populated when the view is rendered or updated.

|

Collectives™ on Stack Overflow

Angular2 - dynamic variable in html

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related