Angular event binding: Using Event Binding in Angular 13

Angular’s event binding allows us to wire up event handlers from within your component templates. For example, we can wire up the native dom element events and custom events you create for your components to emit.

Angular event binding

Event binding in Angular will have the target event name within parentheses on the left of the equal sign and a quoted template statement on the right side. This is because property binding uses the square brackets, while event binding uses parentheses.

When the user interacts with an application in the form of a keyboard movement a mouse click, it generates the event. These events need to be handled to perform some action. This is where an event binding comes into the picture.

Syntax:

(event)

See the following example.

Write the following code inside the app.component.html file.

<h2> Angular 12 Event binding </h2>
<button (click) = "onBam()">Click Btn</button>

We have used the button element and added the click event to it. The onBam() event is native in HTML but, we are using angular here, so with the help of Angular, we can remove the on from the event and write event in the parentheses, which is click.

Angular has the pattern for native dom events where it is looking for the event name without the on, so any native dom event that is named on x, you would bind it by leaving off the on prefix. This is because angular expects the onBam() method to be available in execution.

When a user clicks on the button, it will call the onBam() function. Here, you can name the function, whatever you want. Then it will return whatever onBam() function will return. So all the flow will be transferred to the onBam() function.

Inside the app.component.ts file, we need to define the onBam() function. So let’s do it.

// app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  onClick() {
    console.log('Bamm!!!');
  }
}

When the user clicks the button inside the browser console, we can see the Bam!!!

We can also use the prefix on-; this is known as the canonical form in event binding.

<!-- app.component.html -->

<h2> Angular 12 Event binding </h2>
<button on-click = "onBam()">Click Btn</button>

Please save the file, and it works the same as the previous one.

$event handling and event handling statements

In event binding, we bind the event handler for a target event. Whenever we perform some operations, the event will be raised.

The event handler then executes a template statement. The template handler will have a receiver, operating based on the event received and then responding. One such response would be storing the value from view to the array in the component.

If the event is the native DOM element event, then the $event is a DOM element object with different properties like target and target.value.

Okay, let’s understand with an example.

Create a file called App.ts inside an app folder and write the following code.

// App.ts

export class App {
  name: string;
  price: number;
}

Now, import the file inside the app.component.ts file.

// app.component.ts

import { Component } from '@angular/core';
import { App } from './App';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  app: App = {
    name: 'FB',
    price: 22
  };
}

Also, we have defined the property values of the App class.

Now, write the following code inside the app.component.html file.

<div>
  <h2> Angular 12 Event binding </h2>
  <input [value]="app.name"
        (input)="app.name=$event.target.value" />
</div>

In the above example we can see ‘app.name‘ bound to $event.target.value.

That’s it for this tutorial.

Angular Event Binding: Using Event Binding in Angular 13