Class Binding in Angular 8

Next article icon

Event Binding in Angular 8

Last Updated : 14 Sep, 2020

In Angular 8, event binding is used to handle the events raised by the user actions like button click, mouse movement, keystrokes, etc. When the DOM event happens at an element(e.g. click, keydown, keyup), it calls the specified method in the particular component.

Using Event Binding we can bind data from DOM to the component and hence can use that data for further purposes.

Syntax:

< element (event) = function() >

Approach:

Define a function in the app.component.ts file which will do the given task.
In the app.component.html file, bind the function to the given event on the HTML element.

Example 1: Using click event on the input element.

app.component.html

HTML

<h1> 
  GeeksforGeeks 
</h1> 
<input (click)="gfg($event)" value="Geeks"> 

app.component.ts

Javascript

import { Component } from '@angular/core';     
@Component({     
  selector: 'app-root',     
  templateUrl: './app.component.html',     
  styleUrls: ['./app.component.css']     
})     
export class AppComponent {     
  gfg(event) { 
    console.log(event.toElement.value); 
  }     
} 

Output:

Example 2: Using keyup event on the input element.

app.component.html

HTML

<!-- event is passed to function -->
<input (keyup)="onKeyUp($event)">   
  
  
<p>{{text}}</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 {    
  text = '';  
  onKeyUp(x) {  
  
    // Appending the updated value 
    // to the variable  
    this.text += x.target.value + ' | ';  
  }  
} 

Output:

Class Binding in Angular 8

taran910

News

Improve

Article Tags :

Similar Reads

Event Binding in Angular 8

In Angular 8, event binding is used to handle the events raised by the user actions like button click, mouse movement, keystrokes, etc. When the DOM event happens at an element(e.g. click, keydown, keyup), it calls the specified method in the particular component. Using Event Binding we can bind dat

Class Binding in Angular 8

Class binding in Angular makes it very easy to set the class property of a view element. We can set or remove the CSS class names from an element's class attribute with the help of class binding. We bind a class of a DOM element to a field that is a defined property in our Typescript Code. Its synta

Binding Syntax In Angular

In Angular, binding syntax lets you determine the channel of data transmission between the component class and the template. Among various types of bindings supported by Angular are interpolation, property binding, event binding, and two-way-data-binding. Therefore, it is important to understand var

Angular PrimeNG Dialog Events

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will know how to use the Dialog Events in Angular PrimeNG. The Dialog Component

Property binding in angular 8

Property Binding is a one-way data-binding technique. In property binding, we bind a property of a DOM element to a field which is a defined property in our component TypeScript code. Actually, Angular internally converts string interpolation into property binding. In this, we bind the property of a

Style Binding in Angular 17

In Angular, creating visually appealing and dynamic user interfaces is important for delivering an engaging user experience. One such powerful feature is Style Binding. It allows you to dynamically apply CSS styles to HTML elements based on component data or expressions. In this article, we'll explo

Event Calender using Angular

In this article, we will walk through the steps to create a dynamic Event Calendar using Angular 17 standalone components. This calendar will allow users to add events to specific dates and view them interactively. We will utilize Angular's powerful features and best practices to build a clean and e

Angular PrimeNG Button Events

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. This article will show us how to style the Tooltip component in Angular PrimeNG. A Button is general

Components in Angular 8

The component is the basic building block of Angular. It has a selector, template, style, and other properties, and it specifies the metadata required to process the component. Creating a Component in Angular 8: To create a component in any angular application, follow the below steps: Get to the ang

Angular PrimeNG BlockUI Events

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will know about Angular PrimeNG BlockUI Events. The BlockUI component is used to