Event handler in Angular 6+

Last Updated : 26 Oct, 2020

Introduction:

In Angular 6, event handling is used to hear and capture all the events like clicks, mouse movements, keystrokes and etc. It is an important feature that is present in Angular and it is used in every project irrespective of its size.

Syntax:

html

<HTML element (event) > =  function name()>

Explanation of Syntax:

HTML elements can be used like <button> tag, input tag and etc.
In events, we can use many events that are present like (click), (change) and etc.
We need to give a function name in strings and we need to write the implementation in the ts file.

Approach:

According to the above example declare an event handler with any of the key events in the HTML file.
In ts file write the implementation of the function according to the requirement.
Below two examples where we used different events to use the concept.
The one is (change) event and the second one is (click).

Example 1: Using change:

app.component.html:

html

<input (change)="displayValue($event)">
<p> Entered Data is : {{data}}</p>

app.component.ts:

javascript

import { Component } from '@angular/core';     
@Component({     
  selector: 'app-root',     
  templateUrl: './app.component.html',     
  styleUrls: ['./app.component.css']     
})     
export class AppComponent {    
  data:String = '';  
  displayValue(event){
        this.data = event.target.value;  

  }  
}

app.module.ts:

javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';


@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  providers: []
})
export class AppModule { }

Output:

Example 2: Using onclick:

app.component.html:

html

<div>
  <button (click)="handleClick()">
    Tap Here to Display and Hide the Company name
  </button>
</div>
<br>
<div *ngIf="toDisplay" class="data">
  <div class="centered">
    {{name}}
  </div>
</div>

app.component.ts:

javascript

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent  {
  name: string = '';

  toDisplay =false;

  handleClick() {
    this.toDisplay = !this.toDisplay
    this.name = 'GeeksForGeeks'

  }

 
}

app.module.ts:

javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';


@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  providers: []
})
export class AppModule { }