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

Last Updated : 02 Mar, 2023
Comments
Improve
Suggest changes
Like Article
Like
Report

In this article, we will see how to get an input value entered in the search box using Enter key in AngularJS. To implement a search component in AngularJS that 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 purposes, bootstrap and font awesome is being used.

We need a basic input tag that will have a keyup event that calls an onSubmit($event) function and pass the 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: This example describes the process for getting the input value entered in the search box using Enter key in AngularJS.

 
  • app.component.html
HTML 
<div class="container">
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4">
            <h1>GeeksforGeeks</h1>
            <h3>
                How to get input value search box and 
                enter it in AngularJS component using 
                Enter key?
            </h3>
            <h4>Programming Languages</h4>
            <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
CSS 
.searchBox {
    margin: 20px 0;
}

input {
    width: 20%;
    padding: 10px;
    text-align: center;
}

h1 {
    color: green;
}
  • app.component.ts
JavaScript 
import { Component } from '@angular/core';
import {
    AbstractControl, FormBuilder,
    FormGroup
} from '@angular/forms';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    searchValue: any;
    condition: boolean = false;
    prevText: string = '';
    list_lang: any[] = ['java', 'c++', 
        'python', 'c', 'javascript'];
    res_list = [];
    res_cnt: number = 0;

    onSubmit($event: KeyboardEvent) {
        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;
        }
    }
}
  • app.module.ts
JavaScript 
import { NgModule } from '@angular/core';
import { BrowserModule } 
    from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        FormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output:

 

Next Article
How to empty the content of an element using AngularJS ?

A
amitsingh48
Improve
Article Tags :

Similar Reads