¿Cómo obtener el cuadro de búsqueda de valor de entrada e ingresarlo en el componente AngularJS usando la tecla Intro?

Para implementar un componente de búsqueda en AngularJS que llama a la función cada vez que el usuario presiona la tecla Intro (keyCode = 13) y luego realiza alguna tarea relacionada con la entrada del usuario. Esto se puede lograr fácilmente usando el evento keyup .

Aquí, con fines de estilo, se utilizan Bootstrap y Font Awesome.

Necesitamos una etiqueta de entrada básica que tenga un evento keyup que llame a una función onSubmit($event) y pase el evento como argumento. El evento $ nos brinda diferentes tipos de propiedad, pero vamos a tomar la ayuda de keyCode , que nos dice qué tecla presiona el usuario. Usamos el keyCode para verificar si el usuario ha presionado la tecla Enter cuyo código es 13. Una vez que se presiona la tecla Enter , puede realizar la tarea que desee, como buscar en una lista o pasar el elemento de búsqueda a otro componente. Para simplificar, hemos creado una pequeña array que verifica el elemento de búsqueda dentro de la array y genera los resultados.

Ejemplo:

<div class="container">
  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4">
      <h3>Programming Languages</h3>
      <div class="searchBox">
        <input (keyup)="onSubmit($event)" 
          [(ngModel)]="searchValue" type="text" 
          id="searchKey" class="form-control"
          placeholder="Search Box" />
      </div>
        
      <div *ngIf="condition; then block1; else block2">
      </div>
      <ng-template #block1>
        <i class="fa fa-spinner fa-spin" aria-hidden="true">
        </i> Searching your results for
        <strong>{{prevText}}</strong>
      </ng-template>
      <ng-template #block2>
        <h6>{{res_cnt}} Search Result Found
          <span *ngFor="let lang of res_list">
            <strong>{{lang}}, </strong></span>
        </h6>
      </ng-template>
    </div>
  </div>
</div>

.searchBox{
   margin: 20px 0;
}
   
input{
   width: 100%; 
   padding: 10px; 
   text-align: center;
}

import { Component } from '@angular/core';
import { AbstractControl, FormBuilder, 
    FormGroup } from '@angular/forms';
  
@Component({
  selector: 'app-root',
  template: './app.component.html',
  styles: ['./app.component.css']
})
export class AppComponent {
  
  searchValue: string = null;
  condition: boolean = null;
  prevText: string = '';
  list_lang = ['java', 'c++', 'python', 'c', 'javascript'];
  res_list = [];
  res_cnt: number = 0;
    
  onSubmit($event){
    if($event.keyCode === 13){
      this.condition = true;
      this.prevText = this.searchValue;
      this.res_cnt = 0;
      this.res_list = [];
      setTimeout(() => {
        this.condition = false;
        for(let i=0; i<this.list_lang.length; i++){
          if(this.list_lang[i] === this.prevText.toLowerCase()
             || this.list_lang[i].startsWith(this.prevText)){
            this.res_cnt += 1;
            this.res_list.push(this.list_lang[i]);
          }
        }
      }, 3000);
      this.searchValue = null;
    }
  }
}

Producción