Coeus Coeus - 9 months ago 42
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


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


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

Im expecting url to be baseurl+path

Answer Source

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

<img [src]="'' + 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="{{prod.imgUrl}}">

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