Data Binding - Angular (Tutorial #6) 

In this video we will learn about Data Binding in Angular. Data Binding allows to define communication between Component and View.
Use this link to share this video: • Data Binding - Angular...
So we can say DB is process where data is passed from Angular Component to the view(template) and from view to component.
There are four forms of data binding and they differ in the way the data flow.
1) Interpolation . {{ }}
2)Property Binding [ ]
3)Event Binding ( )
4) Two way binding [( )]
Interpolation:
Interpolation provides the data binding from component to view. Interpolation is one way data binding It binds from Component class to the template
Property Binding:
Property binding allows us to bind Property of view element to the value of template expression
The property binding uses the [ ] bracket. The binding target is placed inside the square bracket. The binding source is enclosed in quotes
Difference between Interpolation and Property Binding:
If I talk about Interpolation - it requires expression to return a string. So if you want to set element property to a non string data value - we must use property binding
Event Binding:
The interpolation and property binding are one way binding from component to view.
Event binding is used to perform an action in the component (may be executing a method) when user-raise a event - like click on button
Event binding uses the parenthesis. And name of the event is enclosed in parenthesis and then it assigned to the statement which mostly the method in the component class
Two-way data binding:
2 way data binding means changes made in component data should sync to the view so any changes made in the view are immediately updated in the respective component data
Two way binding is used mainly in data entry forms whenever user makes any changes in the data we would like to update our model in the component with new data and if model changes, we would like to update view as well
Angular uses combination of property binding and event binding by using ngModel directive
ngModel directive is not apart of angular core library . It is defined in the FormsModule library. You need to import FormsModule into our main module that is app.module.ts
If you liked this video don't forget to subscribe my channel
Click subscribe for more updates:
• Introduction- Angular ...
Connect with me:
Facebook: / angularjs4beginners
LinkedIn: / nisha-singla-82407aa0