Angular 4 Bootstrap Autocomplete Example [Angular 4/5]

This article will guide to implement an app with Angular 4 Bootstrap autocomplete example.

ng-bootstrap is a collection of bootstrap based native components that helps us to use and integrate UI components within our Angular 4 apps.

So, let’s get started with Angular 4 Bootstrap autocomplete example using ng-bootstrap.

I am assuming that you already have your app ready if not, visit and set up your first Angular 4 Hello World app.

1. Install ng-bootstrap with Angular 4

By using below command, you can install ng-bootstrap in your app to start using Bootstrap native components.

npm install --save @ng-bootstrap/ng-bootstrap

Now, we just need to import it in our main module.

/src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {FormsModule} from '@angular/forms';

import { AppComponent } from './app.component';

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

Note: don’t forget to add bootstrap CSS in index.html.

Here, I am going to import bootstrap CDN URL for using CSS.

index.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

2. Angular 4 Bootstrap Autocomplete Example

Now, we just need to set up the component where we’re looking to use autocomplete.

/src/app/app.component.ts

import { Component } from '@angular/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';

const states = ['Alabama', 'Alaska', 'American Samoa', 'Arizona', 'Arkansas', 'California', 'Colorado',
  'Connecticut', 'Delaware', 'District Of Columbia', 'Federated States Of Micronesia', 'Florida', 'Georgia',
  'Guam', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine',
  'Marshall Islands', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana',
  'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Northern Mariana Islands', 'Ohio', 'Oklahoma', 'Oregon', 'Palau', 'Pennsylvania', 'Puerto Rico', 'Rhode Island',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virgin Islands', 'Virginia',
  'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular 4 Bootstrap Autocomplete Example';
  public model: any;

  search = (text$: Observable<string>) =>
    text$
      .debounceTime(200)
      .distinctUntilChanged()
      .map(term => term.length < 2 ? []
        : states.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10));
}

Takeaways,

  • Firstly, as you can see that the required modules has been imported into the import section.
  • Secondly, there’s an array of static values that will be populated in autocomplete.
  • Finally, the class has a search funtion to perform the autocomplete. Here, you can make changes as per your need.

Next, let’s define the HTML where we have the input box with autocomplete populated with the values.

/src/app/app.component.html

<label for="typeahead-basic">Search for a state:</label>
<input id="typeahead-basic" type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="search"/>
<hr>
<pre>Model: {{ model | json }}</pre>

Here we go!, it’s easy to implement and use bootstrap autocomplete in Angular 4 app.

Suggested: Implement Angular 4 Bootstrap Components like Progressbars, Alerts, etc

Moreover, if you wanna customize your autocomplete example with few more options, you can do that by using Bootstrap Typeahead Examples.

I hope, you loved this article and it’s been helpful to you.

Don’t forget to share!

Mohit Tanwani

Mohit Tanwani is an enthusiast Techie, a blogger, and IT geek. He has been crazily involved in the industry for 5 years.

Leave a Reply

Be the First to Comment!

avatar
  Subscribe  
Notify of