How To Implement ng-autocomplete In Angular


In this article, we will look at the angular-ng-autocomplete package, which allows us to simply implement a fully-featured autocomplete without the need for a third-party framework such as Material or Bootstrap.

Let’s learn and demonstrate an example of autocomplete using angular-ng-autocomplete package.

First, We will go through installation step. This package includes several features that make Autocomplete control more user-friendly.

Create a new project to directory and go to the project root to install package.

 ng new autocomplete

Install Package:

To install the angular-ng-autocomplete package, run the following npm command terminal window:

it will import all module to autocomplete input field. Now we need to import this in app.module.ts file.

Import to App Module:

Next import AutoCompleteLib module to app.module.ts file. Also add in import array.

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

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { AutocompleteComponent } from './components/autocomplete/autocomplete.component';

import { AutocompleteLibModule } from 'angular-ng-autocomplete';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Add Autocomplete:

Now in html file add autocomplete template. Simply insert the following code into the app.component.html file:

<div class="ng-autocomplete">
  <ng-autocomplete [data]="data" [searchKeyword]="keyword" (selected)='selectEvent($event)'
      (inputChanged)='onChangeSearch($event)' (inputFocused)='onFocused($event)' [itemTemplate]="itemTemplate"

  <ng-template #itemTemplate let-item>
      <a [innerHTML]=""></a>

  <ng-template #notFoundTemplate let-notFound>
      <div [innerHTML]="notFound"></div>

The item shown in results and the Not Found string may both be customised using the [itemTemplate] and [notFoundTemplate] elements, respectively.

Let’s discuss some of the available properties and methods that we can use to autocomplete.

[debounceTime ] :  Delay time while typing.
[isLoading] :  Show loader in autocomplete control when set to true.
placeHolder :  placeholder text in HTML input fields.
inputCleared : when input is cleared this event is emitted.
inputFocused : when input is focused this event is emitted.
inputChanged : when input is changed this event is emitted.
selected : Event is emitted when an item from the list is selected.

Put the following code in the component class file app.component.ts:

import { Component } from '@angular/core';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title = 'autocomplete';
  keyword = 'name';
  data = [
      id: 1,
      name: 'Georgia'
       id: 2,
       name: 'Usa'
       id: 3,
       name: 'England'
      id: 4,
       name: 'Malesiya'
       name: 'Australia'
      id: 6,
       name: 'Canada'
  selectEvent(item:any) {
    // do something with selected item

  onChangeSearch(val: string) {
    // And reassign the 'data' which is binded to 'data' property.
    // do something when input is focused


Thus, using the angular-ng-complete package module, which supports a number of features like custom templates and server-side dynamic response, we learned how to construct an Autocomplete very simply.


Submit a Comment

Your email address will not be published.


Select Categories