Angular | keyup event

11 Jun, 2020
Introduction
Here, we will be explaining the (keyup) event and options that can be used with (keyup) in Angular2. There are various options that can be used with (keyup) event but first let me explain you what is (keyup).  
(keyup):
(keyup) is an Angular event binding to respond to any DOM event. It is a synchronous event that is triggered as the user is interacting with the text-based input controls. When a user presses and releases a key, the (keyup) event occurs. For using in text-based input controls it is generally used to get values after every keystroke. 
Basic Syntax of (keyup)
<input (keyup)="function(parameter)">
Angular provides a corresponding DOM event object in the $event variable which can also be used with (keyup) event to pass values or event.
For passing event syntax will be:
<input (keyup)="keyFunc($event)">
Approach for using (keyup):
Using (keyup) we can call user-defined function which contains the logic to display the text.
create an input element which will take input.
In that input element call the user-defined function on (keyup) event by passing $event.
Take that $event to user-defined function in TypeScript file and take value from event variable by event.target.value and add that to local variable to see synchronous changes on keystroke.
Example:
Here in this implementation, $event is passed to user defined function onKeyUp() in typescript file. The function add every value in input after every keystroke to the text variable defined, the text variable is then displayed. component.html file
<!-- event is passed to function --><input (keyup)="onKeyUp($event)"> <!-- text variable is displayed --><p>{{text}}</p> 
component.ts file:
import { Component, OnInit } from '@angular/core';  @Component({  selector: 'app-txtchk',  templateUrl: './txtchk.component.html',  styleUrls: ['./txtchk.component.css']})export class TxtchkComponent implements OnInit {  text = ''; //initialised the text variable    ngOnInit(): void {  }  onKeyUp(x) { // appending the updated value to the variable    this.text += x.target.value + ' | ';  }  }
Output:
Options for (keyup):
There are many options that can be used with (keyup) event:
(keyup.Space)(keyup.Space) event is used to generate event when spacebar key is pressed.lets take above example just changing the (keyup) to (keyup.Space).Example Implementationcomponent.html file<!-- after space is pressed event is passed to function --><input (keyup.Space)="onKeyUp($event)"> <p>{{text}}</p> <!-- text variable is displayed -->component.ts fileimport { Component, OnInit } from '@angular/core';  @Component({  selector: 'app-txtchk',  templateUrl: './txtchk.component.html',  styleUrls: ['./txtchk.component.css']})export class TxtchkComponent implements OnInit {  text = ''; //initialised the text variable    ngOnInit(): void {  }  onKeyUp(x) { // appending the updated value to the variable    this.text += x.target.value + ' | ';  }  }OutputEvery time spacebar is triggered the value of text variable is updated.
(keyup.Space) event is used to generate event when spacebar key is pressed.lets take above example just changing the (keyup) to (keyup.Space).
Example Implementationcomponent.html file
<!-- after space is pressed event is passed to function --><input (keyup.Space)="onKeyUp($event)"> <p>{{text}}</p> <!-- text variable is displayed -->
component.ts file
import { Component, OnInit } from '@angular/core';  @Component({  selector: 'app-txtchk',  templateUrl: './txtchk.component.html',  styleUrls: ['./txtchk.component.css']})export class TxtchkComponent implements OnInit {  text = ''; //initialised the text variable    ngOnInit(): void {  }  onKeyUp(x) { // appending the updated value to the variable    this.text += x.target.value + ' | ';  }  }
Output
Every time spacebar is triggered the value of text variable is updated.
(keyup.enter)(keyup.enter) event is used to generate event when Enter key is pressed. lets take above example just changing the (keyup) to (keyup.enter).Example Implementationcomponent.html file <!--after enter is pressed event is passed to function --><input (keyup.enter)="onKeyUp($event)"> <p>{{text}}</p> <!-- text variable is displayed -->component.ts fileimport { Component, OnInit } from '@angular/core';  @Component({  selector: 'app-txtchk',  templateUrl: './txtchk.component.html',  styleUrls: ['./txtchk.component.css']})export class TxtchkComponent implements OnInit {  text = ''; //initialised the text variable    ngOnInit(): void {  }  onKeyUp(x) { // appending the updated value to the variable    this.text += x.target.value + ' | ';  }  }OutputEvery time enter is triggered the value of text variable is updated.
(keyup.enter) event is used to generate event when Enter key is pressed. lets take above example just changing the (keyup) to (keyup.enter).
Example Implementation
component.html file 
<!--after enter is pressed event is passed to function --><input (keyup.enter)="onKeyUp($event)"> <p>{{text}}</p> <!-- text variable is displayed -->
component.ts file
import { Component, OnInit } from '@angular/core';  @Component({  selector: 'app-txtchk',  templateUrl: './txtchk.component.html',  styleUrls: ['./txtchk.component.css']})export class TxtchkComponent implements OnInit {  text = ''; //initialised the text variable    ngOnInit(): void {  }  onKeyUp(x) { // appending the updated value to the variable    this.text += x.target.value + ' | ';  }  }
Output
Every time enter is triggered the value of text variable is updated.
(keyup.a(anyCustomCharacter))This event is triggered when you press any character you have mentioned in keyup event.Character can be (A-Z, a-z, 0-9 or any other special character). exp. (keyup.z): Here change will be displayed on z character triggered.Taking same code just changing (keyup) to (keyup.z).Example Implementationcomponent.html file<!--after z is pressed event is passed to function --><input (keyup.z)="onKeyUp($event)"> <p>{{text}}</p> <!-- text variable is displayed -->component.ts file  import { Component, OnInit } from '@angular/core';  @Component({  selector: 'app-txtchk',  templateUrl: './txtchk.component.html',  styleUrls: ['./txtchk.component.css']})export class TxtchkComponent implements OnInit {  text = ''; //initialised the text variable    ngOnInit(): void {  }  onKeyUp(x) { // appending the updated value to the variable    this.text += x.target.value + ' | ';  }  }OutputEvery time z is triggered the value of text variable is updated.
This event is triggered when you press any character you have mentioned in keyup event.Character can be (A-Z, a-z, 0-9 or any other special character). exp. (keyup.z): Here change will be displayed on z character triggered.Taking same code just changing (keyup) to (keyup.z).
Example Implementation
component.html file
<!--after z is pressed event is passed to function --><input (keyup.z)="onKeyUp($event)"> <p>{{text}}</p> <!-- text variable is displayed -->
component.ts file  
import { Component, OnInit } from '@angular/core';  @Component({  selector: 'app-txtchk',  templateUrl: './txtchk.component.html',  styleUrls: ['./txtchk.component.css']})export class TxtchkComponent implements OnInit {  text = ''; //initialised the text variable    ngOnInit(): void {  }  onKeyUp(x) { // appending the updated value to the variable    this.text += x.target.value + ' | ';  }  }
Output
Every time z is triggered the value of text variable is updated.
(keyup.esc)(keyup.esc) event is used to generate event when esc key is pressed. lets take above example just changing the (keyup) to (keyup.esc).Example Implementationcomponent.html file<!--after esc is pressed event is passed to function --><input (keyup.esc)="onKeyUp($event)"> <p>{{text}}</p> <!-- text variable is displayed -->component.ts fileimport { Component, OnInit } from '@angular/core';  @Component({  selector: 'app-txtchk',  templateUrl: './txtchk.component.html',  styleUrls: ['./txtchk.component.css']})export class TxtchkComponent implements OnInit {  text = ''; //initialised the text variable    ngOnInit(): void {  }  onKeyUp(x) { // appending the updated value to the variable    this.text += x.target.value + ' | ';  }  }OutputEvery time esc key is triggered the value of text variable is updated.Similar to above there are many other options that can be used with (keyup)
(keyup.esc) event is used to generate event when esc key is pressed. lets take above example just changing the (keyup) to (keyup.esc).
Example Implementation
component.html file
<!--after esc is pressed event is passed to function --><input (keyup.esc)="onKeyUp($event)"> <p>{{text}}</p> <!-- text variable is displayed -->
component.ts file
import { Component, OnInit } from '@angular/core';  @Component({  selector: 'app-txtchk',  templateUrl: './txtchk.component.html',  styleUrls: ['./txtchk.component.css']})export class TxtchkComponent implements OnInit {  text = ''; //initialised the text variable    ngOnInit(): void {  }  onKeyUp(x) { // appending the updated value to the variable    this.text += x.target.value + ' | ';  }  }
Output
Every time esc key is triggered the value of text variable is updated.Similar to above there are many other options that can be used with (keyup)
(keyup.shift)(keyup.shift) event is used to generate event when shift key is pressed.Example Implementationcomponent.html file<!--after esc is pressed event is passed to function --><input (keyup.shift)="onKeyUp($event)"> <p>{{text}}</p> <!-- text variable is displayed -->component.ts fileimport { Component, OnInit } from '@angular/core';  @Component({  selector: 'app-txtchk',  templateUrl: './txtchk.component.html',  styleUrls: ['./txtchk.component.css']})export class TxtchkComponent implements OnInit {  text = ''; //initialised the text variable    ngOnInit(): void {  }  onKeyUp(x) { // appending the updated value to the variable    this.text += x.target.value + ' | ';  }  }Output
(keyup.shift) event is used to generate event when shift key is pressed.
Example Implementation
component.html file
<!--after esc is pressed event is passed to function --><input (keyup.shift)="onKeyUp($event)"> <p>{{text}}</p> <!-- text variable is displayed -->
component.ts file
import { Component, OnInit } from '@angular/core';  @Component({  selector: 'app-txtchk',  templateUrl: './txtchk.component.html',  styleUrls: ['./txtchk.component.css']})export class TxtchkComponent implements OnInit {  text = ''; //initialised the text variable    ngOnInit(): void {  }  onKeyUp(x) { // appending the updated value to the variable    this.text += x.target.value + ' | ';  }  }
Output
(keyup.control)(keyup.control) event is used to generate event when control key is pressed.Example Implementationcomponent.html file<!--after esc is pressed event is passed to function --><input (keyup.control)="onKeyUp($event)"> <p>{{text}}</p> <!-- text variable is displayed -->component.ts fileimport { Component, OnInit } from '@angular/core';  @Component({  selector: 'app-txtchk',  templateUrl: './txtchk.component.html',  styleUrls: ['./txtchk.component.css']})export class TxtchkComponent implements OnInit {  text = ''; //initialised the text variable    ngOnInit(): void {  }  onKeyUp(x) { // appending the updated value to the variable    this.text += x.target.value + ' | ';  }  }Output
(keyup.control) event is used to generate event when control key is pressed.
Example Implementation
component.html file
<!--after esc is pressed event is passed to function --><input (keyup.control)="onKeyUp($event)"> <p>{{text}}</p> <!-- text variable is displayed -->
component.ts file
import { Component, OnInit } from '@angular/core';  @Component({  selector: 'app-txtchk',  templateUrl: './txtchk.component.html',  styleUrls: ['./txtchk.component.css']})export class TxtchkComponent implements OnInit {  text = ''; //initialised the text variable    ngOnInit(): void {  }  onKeyUp(x) { // appending the updated value to the variable    this.text += x.target.value + ' | ';  }  }
Output
(keyup.alt)(keyup.alt) event is used to generate event when alt key is pressed.Example Implementationcomponent.html file<!--after esc is pressed event is passed to function --><input (keyup.alt)="onKeyUp($event)"> <p>{{text}}</p> <!-- text variable is displayed -->component.ts fileimport { Component, OnInit } from '@angular/core';  @Component({  selector: 'app-txtchk',  templateUrl: './txtchk.component.html',  styleUrls: ['./txtchk.component.css']})export class TxtchkComponent implements OnInit {  text = ''; //initialised the text variable    ngOnInit(): void {  }  onKeyUp(x) { // appending the updated value to the variable    this.text += x.target.value + ' | ';  }  }Output
(keyup.alt) event is used to generate event when alt key is pressed.
Example Implementation
component.html file
<!--after esc is pressed event is passed to function --><input (keyup.alt)="onKeyUp($event)"> <p>{{text}}</p> <!-- text variable is displayed -->
component.ts file
import { Component, OnInit } from '@angular/core';  @Component({  selector: 'app-txtchk',  templateUrl: './txtchk.component.html',  styleUrls: ['./txtchk.component.css']})export class TxtchkComponent implements OnInit {  text = ''; //initialised the text variable    ngOnInit(): void {  }  onKeyUp(x) { // appending the updated value to the variable    this.text += x.target.value + ' | ';  }  }
Output
(keyup.backspace)(keyup.backspace) event is used to generate event when backspace key is pressed . Its basic syntax is:-Example Implementationcomponent.html file<!--after esc is pressed event is passed to function --><input (keyup.backspace)="onKeyUp($event)"> <p>{{text}}</p> <!-- text variable is displayed -->component.ts fileimport { Component, OnInit } from '@angular/core';  @Component({  selector: 'app-txtchk',  templateUrl: './txtchk.component.html',  styleUrls: ['./txtchk.component.css']})export class TxtchkComponent implements OnInit {  text = ''; //initialised the text variable    ngOnInit(): void {  }  onKeyUp(x) { // appending the updated value to the variable    this.text += x.target.value + ' | ';  }  }Output
(keyup.backspace) event is used to generate event when backspace key is pressed . Its basic syntax is:-
Example Implementation
component.html file
<!--after esc is pressed event is passed to function --><input (keyup.backspace)="onKeyUp($event)"> <p>{{text}}</p> <!-- text variable is displayed -->
component.ts file
import { Component, OnInit } from '@angular/core';  @Component({  selector: 'app-txtchk',  templateUrl: './txtchk.component.html',  styleUrls: ['./txtchk.component.css']})export class TxtchkComponent implements OnInit {  text = ''; //initialised the text variable    ngOnInit(): void {  }  onKeyUp(x) { // appending the updated value to the variable    this.text += x.target.value + ' | ';  }  }
Output
(keyup.arrowup)(keyup.arrowup) event is used to generate event when arrowup key is pressed.Example Implementationcomponent.html file<!--after esc is pressed event is passed to function --><input (keyup.arrowup)="onKeyUp($event)"><p>{{text}}</p> <!-- text variable is displayed -->component.ts fileimport { Component, OnInit } from '@angular/core';  @Component({  selector: 'app-txtchk',  templateUrl: './txtchk.component.html',  styleUrls: ['./txtchk.component.css']})export class TxtchkComponent implements OnInit {  text = ''; //initialised the text variable    ngOnInit(): void {  }  onKeyUp(x) { // appending the updated value to the variable    this.text += x.target.value + ' | ';  }  }OutputHence, (keyup) can be used with many options, all their implementations are nearly same, just usage differs to the option used.
(keyup.arrowup) event is used to generate event when arrowup key is pressed.
Example Implementation
component.html file
<!--after esc is pressed event is passed to function --><input (keyup.arrowup)="onKeyUp($event)"><p>{{text}}</p> <!-- text variable is displayed -->
component.ts file
import { Component, OnInit } from '@angular/core';  @Component({  selector: 'app-txtchk',  templateUrl: './txtchk.component.html',  styleUrls: ['./txtchk.component.css']})export class TxtchkComponent implements OnInit {  text = ''; //initialised the text variable    ngOnInit(): void {  }  onKeyUp(x) { // appending the updated value to the variable    this.text += x.target.value + ' | ';  }  }
Output
Hence, (keyup) can be used with many options, all their implementations are nearly same, just usage differs to the option used.
AngularJS-Misc
Picked
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.