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
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)