Angular Event Binding

Angular Event Binding

Angular Event Binding

So far we have covered lot of about Components and property binding. It’s time to learn about the event binding which is very important in every reactive application.

What is event binding

Event binding is basically binding the expression of component with the event or action of HTML template. For example, when user clicks on a button then what should be the action.



Angular Event Binding



I hope you understand what is event binding in angular application from the above scenario. Now let’s start writing some example.

Make sure to run your “hello-world” application first.

Create new Component

Like before, we will create separate component for every example. Create a new component by invoking the below command.

E:\angular\app\hello-world>ng g c event-binding --spec false

Above command will automatically create the component for your. It will also register your newly created component in angular module.


Angular Event Binding



Write Action in Template

Now we will write some action in html template so that we can later bind it with component expression. It is not mandatory, you can write expression before action as well.

src/app/even-binding/event-binding.component.html


<button type="button" (click) = "onClickEvent()">Click Me</button>


wellAs you can see in above example, the “(click)” is the event name and “onClickEvent()” is basically the expression which will execute.


Write Expression in Component

Now we need to create our expression which will be executed on click event. The expression is basically a function where you can define some business logic.

src/app/event-binding/event-binding.component.ts


import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-event-binding',
   templateUrl: './event-binding.component.html',
   styleUrls: ['./event-binding.component.css']
})
export class EventBindingComponent implements OnInit {
 constructor() { }
 ngOnInit() {
 }
 onClickEvent() {
   console.log("Event performed from the template.");
 }
}

Invoke the component

Your component is already registered in angular module, so we can directly invoke our component in angular root template.

src/app/app.component.html


<app-event-binding></app-event-binding>

In above component, we have created the expression or function with the same named which is defined in html template. On click action, a message will be displayed on browser console as below.


Angular Click Event

 

Binding Property with Action

Now let’s bind a component property with some user action. We will create a basic toggle example in which user will click on button to toggle the paragraph visibility.

src/app/event-binding/event-binding.component.html

<button type="button" (click) = "onToggleAction()">Click Me</button>
<p [style.visibility] = "toggle ? 'visible' : 'hidden'">
 this is the paragraph.
</p>


As you can see in above example, we are binding property “[style.visibility]” (This is basically property binding with []) with component (toggle) on click action (onToggleAction()).

Writing Expression

Let’s write some logic to toggle the visibility of paragraph.

src/app/event-binding/event-binding.component.ts


import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-event-binding',
   templateUrl: './event-binding.component.html',
   styleUrls: ['./event-binding.component.css']
})
export class EventBindingComponent implements OnInit {
 toggle: boolean = true;
 constructor() { }
 ngOnInit() { }
 onToggleAction() {
   this.toggle = !this.toggle;
   console.log("Value of toggle : " + this.toggle);
 }
}

As you can see in the above component, we have created a Boolean property with name “toggle“. Initially we have assigned it a true value so that paragraph should be visible.

Inside the expression, we have created a logic to assign true or false value on each user click which will toggle the visibility of paragraph.

You should be able to toggle the visibility on click action

 

Angular Toggle Action

 

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *