How To Implement ng-autocomplete In Angular

Introduction:

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';


@NgModule({
  declarations: [
    AppComponent,
    AutocompleteComponent
  ],
  imports: [
    FormsModule, 
    BrowserModule,
    AppRoutingModule,
    
    AutocompleteLibModule
  ],
  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"
      [notFoundTemplate]="notFoundTemplate">
  </ng-autocomplete>

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

  <ng-template #notFoundTemplate let-notFound>
      <div [innerHTML]="notFound"></div>
  </ng-template>
</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.

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

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

@Component({
  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'
     },
     {
      id:5,
       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.
  }
  
  onFocused(e:any){
    // do something when input is focused
  }
}

Conclusion:

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.

Output: