Listen to enter click on <input> component

Question

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.

Answer 1

对于ENTER键，请使用keyup.enter

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