Angular2: Property binding from property inside component

Question

I am confused as to the difference between these two ways of data binding.

In my component I have the property: stringInterpolation = This is string interpolation;

In my html I bind that property to the value attribute in an input: <input type="text" value="{{stringInterpolation}}">

I have read that I can also bind the property in another way: <input type="text" [value]="stringInterpolation"> which outputs the same value inside the textbox.

Here is the inspection from dev tools of the two inputs:

<input _ngcontent-qdj-2="" type="text" ng-reflect-value="This is string interpolation">

and

<input _ngcontent-qdj-2="" type="text" ng-reflect-value="This is string interpolation">

They are both the same.

My question is: How is value="{{stringInterpolation}} different to [value]="stringInterpolation"?

Pankaj Parkar · Accepted Answer · 2016-11-21 04:30:36Z

They are alternative way of evaluate property value

value={{stringInterpolation}}

Above will evaluate {{}} interpolation and add that value inside value property of DOM.

Where as [value]="stringInterpolation" syntactical sugar & little verbose of first one.

In Angular 2 it is known as property binding. Generally it tend to use in Component to component communication purpose. And sometimes for setting dynamic values to DOM properties.

Property binding meaning attribute name wrap with [] & whatever value specified in property binding gets evaluate against the current component context(this).

Apart from this while plotting component HTML on page, angular adds dynamic classes on each DOM node _ngcontent-[someunique]-[somenumber]="" and same thing has been applied of CSS rule if you added any CSS's for component. This additional attribute has been added in both place (CSS & and node) to make sure Component CSS should only make affect on the current loaded component(depends on what ViewEncapsulation you set in component metadata).

Collectives™ on Stack Overflow

Angular2: Property binding from property inside component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related