Angular 8/9 Autocomplete using angular-ng-autocomplete Package Tutorial by example

In general Autocomplete or Auto, suggestion control is used to show/ fetch related items from a local or remote server as user types to make a selection from available items.

In this tutorial, we will discuss the angular-ng-autocomplete package using which we can easily implement a fully-featured autocomplete without using any third party framework like Material or Bootstrap.

This package provides many inbuilt features to make Autocomplete control more user-friendly for a user.

Let’s quickly get into installation steps, after that, we will discuss its main features and options available to make it more customized according to the needs of a project.

Installation steps for angular-ng-autocomplete Package:

We already have a project up and running and using Angular’s latest version 8.2.14:

Install

Run following npm command in the terminal window at project root to install the angular-ng-autocomplete package:

Configure App Module

Next, in the app.module.ts file import AutocompleteLibModule then add in the imports array as shown below:

Adding Autocomplete

Now in component’s HTML template add ng-autocomplete directive with some properties and method events.

Here we have AutocompleteComponent’s template in autocomplete.component.html file, just place below code:

 

The [itemTemplate] and [notFoundTemplate] are used to customize the item shown in results and Not Found string respectively.

In component class file autocomplete.component.ts place below code:

Show Multiple Values in Results

In the above object data, there are two important properties name and address. To show both of them in search results we can modify the item template as shown below:

Server Side Response in Autocomplete

Let’s have a look in dynamic Autocomplete where search results are fetched from the server using HTTP Client. Here are using OMDb API service to fetch matching movies in Autocomplete suggestions.

Using (inputChanged) event handler will call getServerResponse method which in turn fetch server response using http’s get method and feed the data object.

Check the below code in HTML template:

Let’s discuss some of the available properties and methods we used above:

        [data] :  Data of items list. It can be array of strings or array of objects.

        [searchKeyword] : Variable name to filter data with. Like here we have ‘Title’

        [notFoundTemplate] : Set template with message when no result found.

[itemTemplate] : Set template for each item shown in results suggetions.

        [debounceTime] : Delay time while typing.
        [isLoading] : Show loader in autocomplete control when set to true.
        [minQueryLength] : The minimum number of characters the user must type before a search is performed.
        placeHolder : HTML <input> placeholder text.
        (selected) : Event is emitted when an item from the list is selected.
        (inputChanged) : Event is emitted when an input is changed.
        (inputFocused) : Event is emitted when an input is focused.
        (inputCleared) : Event is emitted when an input is cleared.

 

Now in component class place following code:

So here we got to know how to implement an Autocomplete very easily using the  angular-ng-complete package module which supports many features like custom templates, server-side dynamic response, debounceTime which reduces the unwanted requests to the server on every keypress.

You can also opt for Angular Material based autocomplete but it required a lot of configurations and not preferred if only Autocomplete is required.

3
Leave a Reply

avatar
2 Comment threads
1 Thread replies
6 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
Jolly.exeNatan MaiaDan Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Dan
Guest
Dan

Thanks for this article. I absolutely love angular-ng-autocomplete. It’s easy to use with many great features! <3

Natan Maia
Guest
Natan Maia

hello! How can I use two keyword in input form? thanks