Angular | keyup event

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)



filter_none

edit
close

play_arrow

link
brightness_4
code

<input (keyup)="function(parameter)">

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<input (keyup)="keyFunc($event)">

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!-- event is passed to function -->
<input (keyup)="onKeyUp($event)"> 
<!-- text variable is displayed -->
<p>{{text}}</p

chevron_right


component.ts file:

filter_none

edit
close

play_arrow

link
brightness_4
code

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 + ' | ';
  }
  }

chevron_right


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 Implementation
    component.html file

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!-- after space is pressed event is passed to function -->
    <input (keyup.Space)="onKeyUp($event)"> 
    <p>{{text}}</p> <!-- text variable is displayed -->

    chevron_right

    
    

    component.ts file

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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 + ' | ';
      }
      }

    chevron_right

    
    

    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 Implementation

    component.html file 



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!--after enter is pressed event is passed to function -->
    <input (keyup.enter)="onKeyUp($event)"> 
    <p>{{text}}</p> <!-- text variable is displayed -->

    chevron_right

    
    

    component.ts file

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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 + ' | ';
      }
      }

    chevron_right

    
    

    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 Implementation

    component.html file

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!--after z is pressed event is passed to function -->
    <input (keyup.z)="onKeyUp($event)"> 
    <p>{{text}}</p> <!-- text variable is displayed -->

    chevron_right

    
    

    component.ts file 
     

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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 + ' | ';
      }
      }

    chevron_right

    
    

    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 Implementation

    component.html file

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!--after esc is pressed event is passed to function -->
    <input (keyup.esc)="onKeyUp($event)"> 
    <p>{{text}}</p> <!-- text variable is displayed -->

    chevron_right

    
    

    component.ts file

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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 + ' | ';
      }
      }

    chevron_right

    
    

    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 Implementation

    component.html file

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!--after esc is pressed event is passed to function -->
    <input (keyup.shift)="onKeyUp($event)"> 
    <p>{{text}}</p> <!-- text variable is displayed -->

    chevron_right

    
    

    component.ts file

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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 + ' | ';
      }
      }

    chevron_right

    
    

    Output

  • (keyup.control)

    (keyup.control) event is used to generate event when control key is pressed.



    Example Implementation

    component.html file

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!--after esc is pressed event is passed to function -->
    <input (keyup.control)="onKeyUp($event)"> 
    <p>{{text}}</p> <!-- text variable is displayed -->

    chevron_right

    
    

    component.ts file

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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 + ' | ';
      }
      }

    chevron_right

    
    

    Output

  • (keyup.alt)

    (keyup.alt) event is used to generate event when alt key is pressed.

    Example Implementation

    component.html file

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!--after esc is pressed event is passed to function -->
    <input (keyup.alt)="onKeyUp($event)"> 
    <p>{{text}}</p> <!-- text variable is displayed -->

    chevron_right

    
    

    component.ts file

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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 + ' | ';
      }
      }

    chevron_right

    
    

    Output

  • (keyup.backspace)

    (keyup.backspace) event is used to generate event when backspace key is pressed . Its basic syntax is:-

    Example Implementation

    component.html file



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!--after esc is pressed event is passed to function -->
    <input (keyup.backspace)="onKeyUp($event)"> 
    <p>{{text}}</p> <!-- text variable is displayed -->

    chevron_right

    
    

    component.ts file

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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 + ' | ';
      }
      }

    chevron_right

    
    

    Output

  • (keyup.arrowup)

    (keyup.arrowup) event is used to generate event when arrowup key is pressed.

    Example Implementation

    component.html file

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!--after esc is pressed event is passed to function -->
    <input (keyup.arrowup)="onKeyUp($event)">
    <p>{{text}}</p> <!-- text variable is displayed -->

    chevron_right

    
    

    component.ts file

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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 + ' | ';
      }
      }

    chevron_right

    
    

    Output

    Hence, (keyup) can be used with many options, all their implementations are nearly same, just usage differs to the option used.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.