Is there a difference between [src]="imgsrc" and src={{imgsrc}}?


#1

Hi,

I know both work. But what are the differences ?

[src]="imgsrc" and src={{imgsrc}}

One is binding once {{}} and the other one bind it as many time as the class change?


#2

Also how to use OR operator with [src]? I tried but it was not working with one way binding syntax and worked with {{}} expression. Thanks


#3

I am not sure I got your question
The logic of “or” should be in your class with [src]

var imgsrc=a || b;

in your view

[src]="“imgsrc”


#4

The first one is an example of Property Binding. You can bind any template expression to it:

[src]="imgsrc"

The second one is an example of String Interpolation. This will evaluate the template expression and convert it to a string. Interpolation is a special syntax that Angular converts into a property binding:

src={{imgsrc}}

I recommend reading through the links I added above, Angular explains them pretty well. :slight_smile:


#5

You got my question, but it also works in view as well. Lets say I’m getting an object where user profile pic can be blank then handle it at view level like

`src={{obj.profilePic || 'default.png}}`

But it won’t work with src=[] syntax.


#6

tks ! It confirms… I was right! :slight_smile:


#7

Couldn’t it be working this way ?