angular 2: attaching string with property binding

Question

I'm trying to attach string with propery binding

for example my object is

{
  "name": "The Walking Dead",
  "imageUrl": "/title/tt1520211/?pf_rd_m=A2FGELUUNOQJNL&pf_rd_p=2240084122&pf_rd_r=1Q5ZRDHSA2ZK5S6Q31WN&pf_rd_s=center-1&pf_rd_t=15506&pf_rd_i=tvmeter&ref_=chttvm_tt_1",
  "rating": "8.6"
},

as I dont have base url in imageUrl field I want to attach it in angular template url

template:

<tbody *ngFor="let prod of products">
<tr >
  <td><img [src]="'www.example.com/'+{{prod.imgUrl}}" alt=""></td>
  <td>{{prod.name}}</td>
  <td>{{prod.rating}}</td>
</tr>

</tbody>

I'm trying to add example.com for my ImageUrl in my template field and I'm unable to add base URL

Im expecting url to be baseurl+path

www.example.com/title/tt1520211/?pf_rd_m=A2FGELUUNOQJNL&pf_rd_p=2240084122&pf_rd_r=1Q5ZRDHSA2ZK5S6Q31WN&pf_rd_s=center-1&pf_rd_t=15506&pf_rd_i=tvmeter&ref_=chttvm_tt_1

Kornel Dylski · Accepted Answer · 2016-11-10 11:27:27Z

2

You dont have to use curly brackets. Just do simple:

<img [src]="'www.example.com/' + prod.imgUrl">

<tag [someAttr]="someValue">

In angular this means that someValue will be evaluated (just like inside {{}}) and assigned to someAttr, so for string part you should use quotes like in pure JS

<tag someAttr="someString">

means that someString will be parsed like template, (you must use {{}} to evaluate imgUrl) and assigned to someAttr

in your e.g. <img src="www.example.com/{{prod.imgUrl}}">

someAttr is @Input() property in component, or HTMLElement property,

answered Nov 10, 2016 at 11:27

Kornel Dylski

1,30314 silver badges17 bronze badges

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

Comments

Avram Virgil · Accepted Answer · 2016-11-10 10:56:41Z

2

Try it like this:

<img src="www.example.com/{{prod.imgUrl}}" alt="">

answered Nov 10, 2016 at 10:56

Avram Virgil

1,22013 silver badges22 bronze badges

Comments

Tobias Gassmann · Accepted Answer · 2016-11-10 11:01:37Z

2

or you can try

<td><img [src]="'www.example.com/' + prod.imgUrl" alt=""></td>

without the curcly braces

answered Nov 10, 2016 at 11:01

Tobias Gassmann

11.9k18 gold badges62 silver badges97 bronze badges

Collectives™ on Stack Overflow

angular 2: attaching string with property binding

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related