Angular 10 Auto-Complete Example

Angular 10 Auto-Complete Example

In this example, we'll learn how to build an Angular 10 auto complete example.

We'll need to have a few prerequisites for this tutorial such as Node.js and Angular CLI v10 installed on our local development machine.

Next, you'll need to create a project using the following command:

$ ng new Angular10AutoCompleteExample

The CLI will ask you a couple of questions — If Would you like to add Angular routing? Type y for Yes and Which stylesheet format would you like to use? Choose CSS.

Installing Angular-Ng-Autocomplete

Next, you'll need to navigate to your project's folder and install the angular-ng-autocomplete library:

$ cd Angular10AutoCompleteExample
$ npm install angular-ng-autocomplete

Importing the AutocompleteLibModule

Next, open the src/app/app.module.ts file and import AutocompleteLibModule and add it in the imports array"

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

import {AppComponent} from './app.component';
import {AutocompleteLibModule} from 'angular-ng-autocomplete';

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

That's it, you can now use angular-ng-autocomplete in your components.

Adding Auto Complete Feature to our Angular 10 App

Open the src/app/app.component.ts file and update it as follows:

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

  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
export class AppComponent  {
  keyword = 'name';
  public countries = [
      id: 1,
      name: 'Albania',
      id: 2,
      name: 'Belgium',
      id: 3,
      name: 'Denmark',
      id: 4,
      name: 'Montenegro',
      id: 5,
      name: 'Turkey',
      id: 6,
      name: 'Ukraine',
      id: 7,
      name: 'Macedonia',
      id: 8,
      name: 'Slovenia',
      id: 9,
      name: 'Georgia',
      id: 10,
      name: 'India',
      id: 11,
      name: 'Russia',
      id: 12,
      name: 'Switzerland',
    selectEvent(item) {
    // do something with selected item


Next. open the src/app/app.component.html file and update it as follows:

<div class="ng-autocomplete">
    placeHolder="Enter the Country Name"

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

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

Finally, we can some CSS code for styling the auto complete component. Open the src/app/app.component.css file and update it as follows:

.ng-autocomplete {
  max-width: 600px;
  display: table;
  margin: 0 auto;

Check the docs for more information.


In this example, we've seen how to implement the auto complete feature in our Angular 10 app using angular-ng-autocomplete.

  • Date: