HDTuto.com

Input Keypress Event in Angular Example



In this tutorial, i will show you input box keypress event angular. it's simple example of angular input change event on keypress event. In this article, we will implement a keypress event in angular. We will look at example of on keypress event in angular 9.

In this post i will show you very simple example of onkeypress event in angular. you can easily use keypress event in angular 6, angular 7, angular 8 and angular 9 application.

When user will press key on input box field then trigger onKeypressEvent() of angular component. we will use (change) attribute for call function. let's see bellow logic code.

<input type="text" (keypress)="onKeypressEvent($event)" />

onKeypressEvent(event: any){

console.log(event.target.value);

}

Let's see full examples now:

Example

src/app/app.component.html

<h1>Angular Textbox Keypress Event Example - HDTuto.com</h1>

<input type="text" (keypress)="onKeypressEvent($event)" />

src/app/app.component.ts

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

@Component({

selector: 'my-app',

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

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

})

export class AppComponent {

name = 'Angular ' + VERSION.major;

onKeypressEvent(event: any){

console.log(event.target.value);

}

}

I hope it can help you...




May 14, 2020 | Category : Angular



Blog Search


Copyright © 2020 HDTuto.com. All rights reserved.