One Way and Two Way Bindings in Angular 4 Tutorial
There are two forms of Angular 4.x.x bindings I will focus on in this tutorial. The first form is the one-way binding which is a write-only binding and the second form is the two-way binding which is both a read and write binding. Towards the end of this tutorial, I included an Angular 4 plunker which you can use to test both bindings.
One Way Binding [] or {{}}
One way bindings are write-only data bindings. They receive data from a data source such as a model and output it to a view. You can initiate this binding by enclosing a HTML attribute or your own attribute with square brackets. You can also take a more direct approach and use the Angular double curly brackets. {{}}
Here is an example of a one way binding in action: I’m enclosing the [innerHtml] HTML attribute with square brackets.
When I enter text into the input the one way binding outputs the text to the view.
Two Way Binding or [()]
Two-way bindings are bindings that read from an input and update the model. They are commonly referred to as banana in a box because the parentheses in the brackets appear like a banana inside a box. Two-way bindings listen for particular events such as change or click and update the data model with new data when a change is detected.
Here is an example of a two way binding in action:
What is happening in this gif is I’m are listening to event changes on the input and those changes then update the data source. When the data source updates, the one-way binding then displays the new data in the view.
Here is a plunker with the full source code. I forked the plunker from someone else and made updates to it. Enjoy
