Input Keyup Event in Angular Example

In this quick example, let's see angular input change event on keyup event. i would like to share with you keyup event in angular. you will learn on keyup event in angular 9. i explained simply step by step angular input keyup event example.

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

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

<input type="text" (keyup)="onKeyUpEvent($event)" />

onKeyUpEvent(event: any){
   console.log(event.target.value);
}

Let's see full examples now:

Example

src/app/app.component.html

<h1>Angular Textbox KeyUp Event Example - HDTuto.com</h1>
   
<input type="text" (keyup)="onKeyUpEvent($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;
  
  onKeyUpEvent(event: any){
    console.log(event.target.value);
  }
}

I hope it can help you...