Why I Chose My Journey to Angular
Data Binding
UI =>Hey you changed what about me< =Component
Episode 2
Welcome back. In my last episode I played you the Anatomy of an Angular Application. Today we are going to see how an angular allows you to connect the data from your application with the UI. Data Binding is an important mechanism which helps to sync the communication between component and templates of an angular application.
Data binding can be implemented in two different ways
- Uni direction(one way)
- Bi direction(two way)
Uni directional data binding
Uni directional(One way) data binding can be either in one of the below stated ways
- Apply data changes from component’s property to UI
- Bind UI events with component’s method
When considering the first way of applying data changes from component’s property to UI, the term called property binding comes into play. Let see what this actually means. In the template the HTML elements which are enclosed by tags are having the attributes which are always string. When the browser run the application, the HTML elements will be instantiated as DOM objects with properties. These will be rendered on the web page as UI. When the value of these property changes, it will lead to re-render the web page.
<img src=“https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iGk9czFG13tY/v0/1000x-1.jpg”>, here src is an image HTML element property.
The property binding is carried out here. In general, we can identify an instance of property binding where the element’s property (binding target) is enclosed by square brackets and it is assigned with a template expression(binding source) which is enclosed in quotes. But there is another way of one way binding called interpolation where the binding target which is not enclosed by square brackets and it is assigned with binding source which is enclosed in curly brackets.
We have seen how apply data changes from component’s property to element’s property. Now we are going to look at the other way round, that is binding UI events with component’s method.
The event binding is carried out here. In general, we can identify an instance of event binding where the DOM event(target event, example: click, change, input, mouseleave, submit) is enclosed in parenthesis and the event handler function(template statement consists of name of component class method with parenthesis). When the event defined in the template is triggered the event handler function defined in the component class will be invoked. We can have the event handler function with $event as parameter to analyse the properties of the event object.
Okay.. Now we know what is one way data binding. Have you ever thought, what to do when we want to update the value of the property when the user changes. Here comes the solution, two way(bi directional) data binding.
Bi directional data binding
Instance of two way data binding can be identified where the enclosure of the mix of (), [] notations can be seen. To specify two way binding in Angular we use ngModel directive.
We can notice that the ngModel directive is enclosed by () which indicates the event binding and [] which indicates the property binding. Wherever we are using the angular directive we have to import the FormsModule in the app.module, which let the component to know the ngModel directive that is responsive to the template where the ngModel is used. Two way binding is considered as an elegant way for synchronising a view and a model.
We are transferring data from component to UI and from UI to component but, all the cases are not as we expected. Sometimes we may need to avoid some data or we need to display the data with additional decoration(transformation of data). So in my next episode I will play you how the angular fulfil these needs. See you!!!
