Listening to Enter Events on Input Text Elements With Angular

Ole Ersoy
Dec 21, 2018


Photo by Victor Larracuente on Unsplash

Updated Version

There’s an updated version of this article here:


We have an <input> element in our template and when we press Enter we want to trigger the component method save($event) .


Bind the save($event) method to the keydown.enter event:

<input (keydown.enter)="save($event)">

Implement the save(event) :

export class SaveComponent { 
save() {
console.log("You entered: ",;


Brought to You By