Autocomplete search dropdowns are a common feature in web applications that provide suggestions as users type into an input field. In Angular, you can implement an autocomplete search dropdown using the Angular Material Autocomplete component. Let’s go through an example to understand how to implement it.

• Install Angular Material: If you haven’t already, install Angular Material by running the following command:

ng add @angular/material

• Import the necessary modules: Open your app module file (app.module.ts) and import the MatAutocompleteModule, MatInputModule, and FormsModule from Angular Material. Additionally, import the ReactiveFormsModule if you plan to use reactive forms. Your imports section should look like this:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatInputModule } from '@angular/material/input';

@NgModule({
  imports: [
    // Other imports
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    MatAutocompleteModule,
    MatInputModule
  ],
  // Other module properties
})
export class AppModule { }

• Define the component class: Inside your component class, create a FormControl instance to manage the input value and define an array of options for the autocomplete suggestions. Here’s an example:

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  searchControl = new FormControl();
  options: string[] = ['Apple', 'Banana', 'Cherry', 'Durian', 'Elderberry'];
  filteredOptions: Observable<string[]>;

  constructor() {
    this.filteredOptions = this.searchControl.valueChanges.pipe(
      startWith(''),
      map(value => this.filterOptions(value))
    );
  }

  filterOptions(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.options.filter(option => option.toLowerCase().includes(filterValue));
  }
}

In the example above, we’ve created a searchControl of type FormControl to manage the input field’s value. The options array holds the available autocomplete suggestions. We’re using the valueChanges observable of the searchControl to dynamically filter the options based on the user’s input.

• Create the template: In the corresponding template file (my-component.component.html), add the following code:

<mat-form-field>
  <input type="text" matInput [formControl]="searchControl" placeholder="Search">
  <mat-autocomplete>
    <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
      {{ option }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

Here, we’ve used the <mat-form-field> container along with the <mat-input> element to display the input field. The [formControl] directive binds the searchControl to the input field. Inside the <mat-autocomplete> element, we use the *ngFor directive to iterate over the filtered options and display them as <mat-option> elements.

• Style the Autocomplete dropdown (optional): If you want to customize the appearance of the Autocomplete dropdown, you can do so by adding styles to your component’s CSS file (my-component.component.css).

That’s it! You’ve now implemented an autocomplete search dropdown using Angular Material. When users type in the input field, they will see suggestions based on the available options, and they can select an option from the dropdown.