Coeus Coeus - 25 days ago 6
TypeScript Question

angular 2: attaching string with property binding

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

Answer

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,