CODEWITHSUNDEEP
javascriptangularjsangular2-directives
Rafael Andrade
Rafael Andrade

Reputation: 505

Differences between value=" {{ var }} " and [value]="var" in AngularJS

Could someone explain to me what is the difference between

value="{{var}}" vs [value]="var"

Thanks.

Upvotes: 1

Views: 601

Answers (1)

Ryan Leach
Ryan Leach

Reputation: 4470

According to https://angular.io/guide/template-syntax#a-new-mental-model

the 2 bracket types represent 2 different directions of data flow.

[target]="expression" is said aloud as 'bind target' and (target)="statement" as 'on target'

bind target, binds your JavaScript model to your view.

on target, raises an event, on change of the view, to your JavaScript model.

you can combine them to create bind-on target, which does both.

https://angular.io/guide/template-syntax#property-binding-or-interpolation

value="{{var}}" is an interpolated binding. It can be used in the same manner as [attr.value]="var"

With these minor differences.

value="{{var}}" or using {{}} inside the content of html nodes, will only work on Strings.

The fact that {{ }} exists in angular means they need to do more work processing templates, but since this work is already sunk, you can feel free to use {{ }} where it makes more sense and improves readability without much of a performance hit.

If you need to bind to a non-string property, you will need to use the property binding syntax instead.

I'd recommend sticking to the property binding syntax [value] = "var" as it will allow you to use the 2 different directional bindings without too much mental overhead.

Upvotes: 1

Related Questions