keyup, keydown, blur are not working in angular 12

Question

I am using angular 12 and trying to play with events. The only click event is working, no other events are getting triggered.

allEvents.ts

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

@Component({
  selector: 'app-all-events',
  templateUrl: './all-events.component.html',
  styleUrls: ['./all-events.component.css']
})
export class AllEventsComponent implements OnInit {
  constructor() { }
  ngOnInit(): void {
  }
  myEvent(evt : any) {
    console.error(evt)
  };
 
}

allEvents.html

<button (click)="myEvent('I am click event')" >Click Event</button>
<br><br>
<input type="text" (onkey)="myEvent($event)" />

When I click on the button on console statements are getting executed, but keydown, keyup, or blur is not working.

-----Configurations------

Angular CLI: 12.2.12 Node: 14.17.6 Package Manager: npm 6.14.15 MACOS: darwin x64

Answer 1

This list contains all of the events supported by angular and their syntax:

(click)="myFunction()"      
(dblclick)="myFunction()"   

(submit)="myFunction()"

(blur)="myFunction()"  
(focus)="myFunction()" 

(scroll)="myFunction()"

(cut)="myFunction()"
(copy)="myFunction()"
(paste)="myFunction()"

(keyup)="myFunction()"
(keypress)="myFunction()"
(keydown)="myFunction()"

(mouseup)="myFunction()"
(mousedown)="myFunction()"
(mouseenter)="myFunction()"

(drag)="myFunction()"
(drop)="myFunction()"
(dragover)="myFunction()"

As you can see the onkey event doesn't exist and you should implement your logic with keyup , keydown or keypress (guess you want to use is this)

Answer 2

I have created a sample project related to input events using Angular 12 on Stackblitz. You can view how input events can be used.

Angular 12 User Input Events (keyup, keydown, blur)