Angular Autocomplete Example

Angular 2 autocomplete is a completion feature (Component) to show more results depending on the user input.

angular 2 autocomplete example
angular 2 autocomplete example

When a user enters a word the angular 2 autocomplete will show a list of suggestions to complete the word (e.g. angu => angular)


By pressing the tab from keyboard to show the next word (e.g. angular [space] => angular 2)

live example at the end of the article

Angular 2 Autocomplete Example
Angular 2 Autocomplete Example

In angular 2 autocomplete Example we will see how to build auto complete based on bootstrap.

build auto complete
build auto complete

Include bootstrap before we start (it’s easy : ) )

<link href=”” rel=”stylesheet”>

Main app code source:

 * Created by Tareq Boulakjar. from

import {Component, ElementRef, ViewEncapsulation} from 'angular2/core';
import {Component} from 'angular2/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
import {AutocompleteContainer} from './autocomplete-container';
import {Autocomplete} from './autocomplete.component';
export const AUTOCOMPLETE_DIRECTIVES = [Autocomplete, AutocompleteContainer];

/*Angular 2 Autocomplete Example*/
    selector: 'my-app',

                <div class='container-fluid'>
                    <h3>Angular 2 Autocomplete Example</h3>
                    <h4>The Selected Car: {{selectedCar}}</h4>
                    <input [(ngModel)]="selectedCar"

                    <h3>Asynchronous results</h3>
                    <h4>Model: {{asyncSelectedCar}}</h4>
                    <input [(ngModel)]="asyncSelectedCar"
                           placeholder="Locations loaded with timeout"
                    <div [hidden]="autocompleteLoading!==true">
                        <i class="glyphicon glyphicon-refresh ng-hide" style=""></i>
                    <div [hidden]="autocompleteNoResults!==true" class="" style="">
                        <i class="glyphicon glyphicon-remove"></i> Empty Query !
export class Angular2Autocomplete {
    private selectedCar:string = '';
    private asyncSelectedCar:string = '';
    private autocompleteLoading:boolean = false;
    private autocompleteNoResults:boolean = false;
    private carsExample1:Array<string> = ['BMW', 'Audi','Mercedes','Porsche','Volkswagen','Opel','Maserati','Volkswagen','BMW Serie 1','BMW Serie 2'];
    private carsExample2:Array<any> = [
        {id: 1, name: 'BMW'},
        {id: 2, name: 'Audi'},
        {id: 3, name: 'Mercedes'},
        {id: 4, name: 'Porsche'},
        {id: 5, name: 'Volkswagen'},
        {id: 6, name: 'Opel'},
        {id: 7, name: 'Maserati'},
        {id: 8, name: 'Volkswagen'},
        {id: 9, name: 'BMW Serie 1'},
        {id: 10, name: 'BMW Serie 2'},

    private getCurrentContext() {
        return this;

    private _cachedResult:any;
    private _previousContext:any;

    private getAsyncData(context:any):Function {
        if (this._previousContext === context) {
            return this._cachedResult;

        this._previousContext = context;
        let f:Function = function ():Promise<string[]> {
            let p:Promise<string[]> = new Promise((resolve:Function) => {
                setTimeout(() => {
                    let query = new RegExp(context.asyncSelectedCar, 'ig');
                    return resolve(context.carsExample1.filter((state:any) => {
                        return query.test(state);
                }, 500);
            return p;
        this._cachedResult = f;
        return this._cachedResult;

    private changeAutocompleteLoading(e:boolean) {
        this.autocompleteLoading = e;

    private changeAutocompleteNoResults(e:boolean) {
        this.autocompleteNoResults = e;

    private autocompleteOnSelect(e:any) {
        console.log(`Selected value: ${e.item}`);


all files from here: angular-2-autocomplete-example

angular 2 autocomplete