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:

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

--

--

Ole Ersoy
Ole Ersoy

Written by Ole Ersoy

Founder of Firefly Semantics Corporation

Responses (2)