{{announcement.body}}
{{announcement.title}}

Use Of Ngx-Bootstrap Typehead In Angular 8

DZone 's Guide to

Use Of Ngx-Bootstrap Typehead In Angular 8

In this article, we will learn about the Typehead component which is a cool feature of Ngx-bootstrap.

· Web Dev Zone ·
Free Resource

Introduction

Ngx-Bootstrap has released a package of open-source tools which are native Angular directives for Bootstrap 3 and 4. It contains all core components powered by Angular. In this article, we will learn about the Typehead component which is a cool feature of Ngx-bootstrap.

What Is Typeahead?

Typeahead — Also known as autocomplete or autosuggest is a language prediction tool that many search interfaces use to provide suggestions for users as they type in a textbox. This is a method for searching and filtering through text. It is also sometimes known as autocomplete, incremental search, search-as-you-type, and inline search.

Prerequisites

  • Basic knowledge of Angular
  • Visual Studio Code must be installed
  • Angular CLI must be installed
  • Node JS must be installed

Step 1

Let's create a new Angular project using the following NPM command,

TypeScript
 




x


1
ng new typehead-example  



Step 2 

Now, let's create a new component by using the following command,

TypeScript
 




xxxxxxxxxx
1


1
ng g c ngx-bootstrap-typehead  



Step 3

Install ngx-bootstrap from npm by using the folowing command.

TypeScript
 




xxxxxxxxxx
1


1
npm install ngx-bootstrap --save  



Or

TypeScript
 




xxxxxxxxxx
1


1
ng add ngx-bootstrap  --component typeahead  



This will be added to our root module

Step 4

Now let's add bootstrap styles in our index.html file .

For Bootstrap 3,

HTML
 




xxxxxxxxxx
1


 
1
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">  



For Bootstrap 4

HTML
 




xxxxxxxxxx
1


1
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">  



Step 5

Let add the template in our ngx-bootstrap-typehead.component.html. 

HTML
 




xxxxxxxxxx
1


1
<h2>Example of Ngx-Bootstrap Typehead</h2>  
2
<div style="width: fit-content;margin: auto;margin-top: 18px;">  
3
  
4
  <pre style="background-color: antiquewhite;" class="card card-block card-header mb-3">Selected option: {{selectedOption | json}}</pre>  
5
  
6
  <input [(ngModel)]="selectedValue" [typeahead]="countries" typeaheadOptionField="name" [typeaheadScrollable]="true"  
7
    (typeaheadOnSelect)="onSelect($event)" class="form-control">  
8
  
9
</div>  



Step 6

 Now, open the ngx-bootstrap-typehead.component.ts file and add the following code in this file,

TypeScript


Step 7 

Now, open the app.component.html file and add the following code in the file,

HTML
 




xxxxxxxxxx
1


1
<app-ngx-bootstrap-typeahead></app-ngx-bootstrap-typeahead>    



Step 8 

Let's open app.module.ts file and add the following code in the file,

TypeScript
 




xxxxxxxxxx
1
25


1
import { BrowserModule } from '@angular/platform-browser';      
2
import { NgModule } from '@angular/core';      
3
import { FormsModule, ReactiveFormsModule } from '@angular/forms';      
4
import { AppComponent } from './app.component';      
5
import { HttpClientModule } from '@angular/common/http';       
6
import { NgxBootstrapTypeaheadComponent } from './ngx-bootstrap-typeahead/ngx-bootstrap-typeahead.component';       
7
import { TypeaheadModule } from 'ngx-bootstrap/typeahead';      
8
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';    
9
    
10
@NgModule({      
11
  declarations: [      
12
    AppComponent,      
13
    NgxBootstrapTypeaheadComponent      
14
  ],      
15
  imports: [      
16
    BrowserModule,      
17
    TypeaheadModule.forRoot(),      
18
    BrowserAnimationsModule,    
19
    FormsModule,      
20
    ReactiveFormsModule,      
21
    HttpClientModule      
22
  ],      
23
  bootstrap: [AppComponent]      
24
})      
25
export class AppModule { }  



Now it's time for the output,

ngx-bootstrap

mgx-bootstrap

ngx-bootstrap

As we can see, whenever I am typing the key, it's getting the values related to the search. We can get the data from the web API. 

Conclusion

In this article, we have seen the Ngx-Bootstrap typehead Component in an Angular 8 application.

Please give your valuable feedback/comments/questions about this article.

I hope you have enjoyed this article, as I have enjoyed writing and coding the examples. 

Please let me know how to improve it.

Topics:
angular ,angular 8 ,tutorial ,typeahead ,web dev

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}