Listening to Enter Events on Input Text Elements With Angular

Photo by Victor Larracuente on Unsplash

Updated Version

There’s an updated version of this article here:

Listening to Enter Events on Input Text Elements With Angular

Scenario

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

Approach

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: ", event.target.value);
    }
}

Demo

Brought to You By

Firefly Semantics Supply Chain and Big Data Analytics for the Cloud