How to get input value search box and enter it in AngularJS component using Enter key ? - GeeksforGeeks

12 Mar, 2021
To implement a search component in AngularJS which calls the function whenever the user presses the enter key(keyCode = 13) and then does some relatable task from the user input. This can be achieved easily using the keyup event.
Here for styling purpose, bootstrap and font awesome are being used.
We need a basic input tag that will have a keyup event that calls an onSubmit($event) function and pass event as an argument. The $event gives us different types of property but we are going to take the help of keyCode which tells us which key is pressed by the user. We use the keyCode to check whether the user has pressed the Enter key whose code is 13. Once the Enter key is pressed you can perform the task that you want such as searching from a list or passing the search element to another component. For simplicity, We have created a small array that checks for the search element inside the array and outputs the results.
Example:
app.component.html
<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>
app.component.css
.searchBox{   margin: 20px 0;}   input{   width: 100%;    padding: 10px;    text-align: center;}
app.component.ts
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;    }  }}
Output
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
AngularJS-Questions
Picked
Technical Scripter 2020
AngularJS
HTML
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Angular Libraries For Web Developers
Angular 10 (blur) Event
Angular PrimeNG Dropdown Component
How to make a Bootstrap Modal Popup in Angular 9/8 ?
How to create module with Routing in Angular 9 ?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?