AppDividend
Latest Code Tutorials

Angular 9/8/7 Event Binding Example | Event Binding In Angular

1

The Event binding in Angular allows us to wire up event handlers from within your component templates. We can wire up the native dom element events, as well as custom events you create for your components to emit.

Angular 9 Event Binding

Event binding syntax will have the target event name within parentheses on the left of the equal sign, and a quoted template statement on the right side. Property binding uses the square brackets, while event binding makes use of 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 9 Event binding </h2>
<button (click) = "onBam()">Click Btn</button>

We have used the button element and add 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. Angular is expecting the onBam() method to be available in the execution context.

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 transfer to 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 a prefix on-; in event binding, this is known as the canonical form.

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

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

Save the file, and it works the same as the previous one.

$event Handling and Event Handling Statements

In event binding, we are binding 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, which will operate based on the event received and then respond. 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 9 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.

Finally, Angular 9/8/7 Event Binding Example is over.

See also

Angular 9 CRUD Tutorial

Angular 9 CLI Upgrade

1 Comment
  1. Amit Parmar says

    Thanks for the guide.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.