In this article we will discuss Angular Event Binding. Before staring this article please go through our previous article Angular Style Binding. In this article we will cover below points,
- What is Event Binding in Angular ?
- How Event Binding work in Angular ?
- Examples of Event Binding
➤ What is Event Binding in Angular ?
When a user interacts with an application in the form of a keyboard movement, button click, mouse over, selecting from a drop-down list, typing in a textbox, etc. it generates an event. These events need to be handled to perform some kind of action. This is where event binding comes into the picture and in Angular Application, we can use event binding to get notified when these events occur.
➤ How Event Binding work in Angular ?
If you want to flow the data in the opposite direction i.e. from HTML Element to Component, then you need to use Event Binding.
For example the following is the syntax for binding to the click event of a button. Within parentheses on the left of the equal sign we have the target event, (click) in this case and on the right we have the template statement. In this case the onClick() method of the component class is called when the click event occurs.
<button (click)="onClick()">My Custom Button</button>
With event binding we can also use the on- prefix alternative as shown below. This is known as the canonical form
<button on-click="onClick()">My Custom Button</button>
➥ Event Binding Example
Every time we click the button, 'The Button is Clicked' message is logged to the console. You can see this message under the Console tab, in the browser developer tools.
 |
| Fig-1 |
➥ Another Example to understand Event Binding
 |
| Fig-2 |
When the page loads for the first time, we want to display only the First Name and Last Name of the employee. When the user clicks on the "Show Details" button, we want to display the "Gender", "Age" as well. The text on the button should be changed to "Hide Details" and when the user clicks on the "Hide Details" button, then the "Gender", "Age" should be hidden and the button text should be changed to "Show Details".
➥ app.component.ts
We have added "ShowDetails" boolean property. The default value is false, so when the page first loads, we will have "Gender" and "Age" hidden. We also have a method, ToggleDetails(), which toggles the value of ShowDetails.
➥ app.component.html
- Notice the click event of the button is binded to ToggleDetails() method
- To dynamically change the text on the button, we are using ternary operator - {{ShowDetails? 'Hide' : 'Show'}} Details
- We used ngIf structural directive on "Gender" and "Age" <tr> elements
- The * prefix before a directive indicates, it is a structural directive
- Besides ngIf, there are other structural directives which we will discuss in our upcoming videos
- The ngIf directive conditionally adds or removes content from the DOM based on whether or not an expression is true or false
- If "ShowDetails" is true, "Gender" and "Age" <tr> elements are added to the DOM, else removed
➥ app.component.css
Below the external CSS is used for style the table.
Now run the application and you can see the output as expected.
Summary
In this tutorial we discussed Angular Event Binding. If have any question related to this topic then give your feedback.
Post a Comment