Thursday, 8 March, 2018 UTC


Summary

  • To change views and data dynamically we learned interpolation, property binding, attribute binding, style binding and class binding.
  • In interpolation and property binding, data flows from the component (the component object created from the component class) to the target (the template or the view)—not the other way around.
  • In event binding events are generated in the view (in the DOM elements) and flows to the component.
  • I am removing all the class and style property binding from the HTML template and associated code from the TypeScript file.
  • idx is the index of the of link object in our link array in the component.
Event Binding in Angular – DiscoverSDK Blog
@JavaScriptKicks: Event Binding in Angular by DiscoverSDKs #javascript #angularjs via JavaScriptKicks
In our journey of learning Angular we have covered quite a lot of things up until now. We also touched on some necessary concepts for having our work done for the time being. To change views and data dynamically we learned interpolation, property binding, attribute binding, style binding and class binding. In this article we are going to learn about event binding.
The syntax of event binding is very simple. In the opening tag of an HTML element you will have to use the following syntax:
We can write unnecessarily complex code in place of the method call, but that is not a concern of this article. Let’s stick to the rules for now.
Before we proceed I want to discuss the data and event flow direction. Did you notice the flow of data in all the previous articles? Did you notice who provided data and who consumed it in interpolation and property binding (everything we used with the syntax of property binding)? In interpolation and property binding, data flows from the component (the component object created from the component class) to the target (the template or the view)—not the other way around. So, the flow of the data is unidirectional. In the case of event binding the opposite happens. In event binding events are generated in the view (in the DOM elements) and flows to the component. It is unidirectional also in this case.
Event Binding in Angular