When reading about one-way binding in angular.component
style, I came across multiple statements that <
vs =
produces less watchers (=
will have additional watcher to propagate value change from child to parent).
However I've just created a dummy component, passed the object to it via =
and <
and number of watchers is the same.
So speaking strictly about performance: are there any diffirence between <
and =
?
one way data binding is better approach because of unidirectional flow of data.
One-way data binding in Angular (i.e. unidirectional binding) is a way to bind data from the component to the view (DOM) or vice versa - from view to the component. It is used to display information to the end-user which automatically stays synchronized with each change of the underlying data.
In a two-way binding, the data flow is bi-directional. This means that the flow of code is from ts file to Html file as well as from Html file to ts file. In order to achieve a two-way binding, we will use ngModel or banana in a box syntax.
I came here with the same question, and was disappointed to see no answer...
I have a small test application where I use all kinds of binding, three of them being one-way. I observed the number of watches (using ng-stats utility), got 42.
I changed these "<"
to "="
, which changed the behavior of my app accordingly, of course. ng-stats still reported 42 watches.
So, at least in terms of watches, this brings no performance improvement.
I guess it is here more as a convenience, avoiding unwanted side effects (child changing a value, parent's value being changed unwillingly) and promoting good practices (using bound functions instead of watches, as explained below).
It can still be a way to avoid watches: a common practice when a parent wants to be advised of changes in a child it is to use two-way binding, set up a watch on the value, and react on changes.
An alternative is to set up a one-way binding (to feed the child), and to provide a callback (via a "&"
binding), and thus to let the child to notify of changes via this callback.
It is more proactive and it removes a watch.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With