How to Create a Custom Autocomplete Component in Angular | Step-by-Step Guide

Introduction

Autocomplete components are a vital part of many web applications, allowing users to efficiently input data and navigate through large data sets. While Angular Material offers a robust autocomplete component, developers may require a more customized solution that fits their specific project needs. With the right approach, developers can build a custom autocomplete component in Angular that might initially seem daunting. In this blog post, we will guide you through the step-by-step process of creating a custom autocomplete component in Angular without using Angular Material. Our focus keyphrase for this blog post is “custom autocomplete component Angular.” Whether you are a beginner or an experienced Angular developer, follow our guide to building a fully functional custom autocomplete component that meets your specific requirements.

Demo

here’s an example of how you could create a custom autocomplete component in Angular without using Angular Material:

First, create a new component called “AutocompleteComponent” using the Angular CLI:

ng generate component Autocomplete

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-autocomplete',
  template: `
    <input type="text" [(ngModel)]="searchTerm" (keyup)="search()">
    <ul *ngIf="showResults">
      <li *ngFor="let option of options" (click)="selectOption(option)">{{ option }}</li>
    </ul>
  `
})
export class AutocompleteComponent {
  searchTerm: string;
  options: string[] = ['Apple', 'Banana', 'Cherry', 'Date'];
  showResults: boolean = false;

  @Output() optionSelected = new EventEmitter<string>();

  search() {
    if (this.searchTerm) {
      this.showResults = true;
      this.options = this.options.filter(option =>
        option.toLowerCase().includes(this.searchTerm.toLowerCase())
      );
    } else {
      this.showResults = false;
    }
  }

  selectOption(option: string) {
    this.searchTerm = option;
    this.showResults = false;
    this.optionSelected.emit(option);
  }
}

Here, AutocompleteComponent that emits the selected option using an EventEmitter. The parent component can listen for this event and update its selectedOption property accordingly.

In the parent component, you can listen for the optionSelected event and update the selectedOption property:

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

@Component({
  selector: 'app-parent',
  template: `
    <app-autocomplete (optionSelected)="onOptionSelected($event)"></app-autocomplete>
    <p>Selected option: {{ selectedOption }}</p>
  `
})
export class ParentComponent {
  selectedOption: string;

  onOptionSelected(option: string) {
    this.selectedOption = option;
  }
}

Now, whenever the user selects an option in the autocomplete component, the optionSelected event will be emitted and the selectedOption property in the parent component will be updated with the selected option.

By adding this feature, the AutocompleteComponent becomes a more flexible and reusable component that developers can use in a wide variety of contexts. The parent component can now respond to user input and update its state based on the selected option, which makes the application more dynamic and interactive.

In summary, the updated version of the AutocompleteComponent with an EventEmitter is a powerful feature that enables parent components to listen for selected options and update their state accordingly. This feature enhances the functionality and flexibility of the custom autocomplete component and allows for a better user experience.

Application Source Code @ LearnSmartCoding GitHub

Check out other topics that might interest you.

• Using Local Storage in Angular Applications: A Practical Guide with Real-Life Examples
• How to Implement reCAPTCHA in an Angular Application: A Step-by-Step Guide
• How to Show a Warning Message to Users When They Try to Close Your Website
• Lazy Loading in Angular: Boosting Performance and User Experience
• Understanding the CanLoad Guard in Angular: Real-time Example
• How to Use Multiple Angular AuthGuards in canActivate | Step-by-Step Guide
• Angular Custom Directives: A Beginner’s Guide with Real-Time Scenario
• Upload Files and Model Data with Angular and .NET Core Web API to Single Endpoint
• Boosting Performance in Your .NET Core Application with Caching