HDTuto.com

Event Binding in Angular Example



Hi Dev

This article will give you example of add event listener in angular. step by step explain bind click event in angular. if you have question about click event binding in angular then i will give simple example with solution. if you have question about how to bind event in angular then i will give simple example with solution.

you can see event binding in angular 9. Alright, let’s dive into the steps.

You can easily event binding in angular 6, angular 7, angular 8 and angular 9 application.

In this post, i will give you simple exsample of click event binding with button and change event bing with select box.

So, let's see bellow simple example with demo and output.

src/app/app.component.ts

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

@Component({

selector: 'my-app',

templateUrl: './app.component.html',

styleUrls: [ './app.component.css' ]

})

export class AppComponent {

name = 'Angular Event Binding Example - HDTuto.com';

types = [

'User',

'Admin',

'Super Admin'

]

chaneType(event){

console.log('Call on change event.');

console.log(event);

}

buttonClick(event){

console.log('Call on click event.');

console.log(event);

}

}

src/app/app.component.html

<h1>{{ name }}</h1>

<div> Type :

<select (change) = "chaneType($event)">

<option *ngFor = "let i of types">{{i}}</option>

</select>

</div>

<button (click)="buttonClick($event)">Click Me!</button>

You can see bellow preview:

You can see bellow output:

Call on change event.

preview-98637320847d9dfba629b.js:1 Event {isTrusted: true, type: "change", target: select, currentTarget: select, eventPhase: 2, …}

preview-98637320847d9dfba629b.js:1 Call on click event.

preview-98637320847d9dfba629b.js:1 MouseEvent {isTrusted: true, screenX: 1095, screenY: 288, clientX: 33, clientY: 106, …}

I hope it can help you...




April 25, 2020 | Category : Angular



Blog Search


Copyright © 2020 HDTuto.com. All rights reserved.