Event handler in Angular 6+

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 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.
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:
<input (change)="displayValue($event)"><p> Entered Data is : {{data}}</p>
app.component.ts:
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:
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:
<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:
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:
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:
Before clicking the icon:
After clicking the icon:
AngularJS-Basics
Picked
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Auth Guards in Angular 9/10/11
Routing in Angular 9/10
How to bundle an Angular app for production?
What is AOT and JIT Compiler in Angular ?
Angular PrimeNG Dropdown Component
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?