ng-autocomplete In Angular

The Code Points August 21, 2022 0

In this article, we will learn how to use/implement ng-autocomplete in angular, angualr-ng-autocomplete provide to simply implement a fully-featured autocomplete without any third-party framework like Angular Material or Bootstrap.

So, let's start with implement demonstrate application of autocomplete using angular-ng-autocomplete.

First, We need to create a new angular application using following command.

ng new angular-autocomplete-example

Install npm Package:

To install the angular-ng-autocomplete package, use the following command into the terminal:

npm install angular-ng-autocomplete

Now, we need to import autocomplete module into the app.module.ts file using following code.

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 { }

Now, add the following code under the app.component.ts file.

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
  }
}

Now, we need to add autocomplete into the our html(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 search filter item shown in results and if it is not available then showing "Not Found" string may both be customized using the [itemTemplate] and [notFoundTemplate] elements, respectively.

Now, run the application using ng serve command into the terminal and see the browser screen looks like below.

Let’s discuss some other available properties and methods of autocomplete.

debounceTime : It is Delay time while typing.

isLoading :  Show loader when autocomplete control set to true.

placeHolder :  It is text in HTML input fields.

inputCleared : This event is emitted(call) when input is cleared.

inputFocused : This event is emitted(call) when input is focused.

inputChanged : This event is emitted(call) when input is changed.

selected : This event is emitted when the list item is selected.

Conclusion

In this article, we learn how to implement autocomplete without any third party framework like angular material or bootstrap. The angular-ng-complete package module, which supports a number of features like custom templates and server-side dynamic response.