Skip to content
Related Articles

Related Articles

Improve Article
How to get input value search box and enter it in AngularJS component using Enter key ?
  • Last Updated : 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




My Personal Notes arrow_drop_up
Recommended Articles
Page :