CODEWITHSUNDEEP
javascriptangular
Black Dynamite
Black Dynamite

Reputation: 4147

Listen to enter click on <input> component

I'm using Angular 4.2.2 with the ES6 style. Right now, I'm at a loss as how to get my code to run a function when the user hits the ENTER key while an field has focus.

Right now, my html looks like so.

  <div class="box" id="redbox" class="app-flex-item"><!-- flex item -->
    <input id="searchTermInput" class="search-input"  ng-keydown="runSearch($event)">
  </div>

and my component controller looks like so.

@Component({
    ...
})
export class AppComponent {

  runSearch(ev): void {
    console.log("Run Search Invoked");
    this.searchResultService.getHeroesSlowly().then(searchResponseResult => {
        this.searchResponseResult = searchResponseResult;
        this.searchResults = searchResponseResult.searchResults;
        this.showDivider = true;
      }
    )
  }
}

Unfortunately, whenever I hit the ENTER key, I don't even see "Run Search Invoked" outputted to the console.

Does anyone know how to listen to enter events on an input component?

Any help is greatly appreciated.

Upvotes: 2

Views: 553

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222582

For ENTER key, use keyup.enter

  <input id="searchTermInput" #box (keyup.enter)="runSearch(box.value)">

Upvotes: 5

Related Questions