How to Create Autocomplete Select Options Angular 17

Hey everyone! Ever wanted to spruce up your Angular app with an Autocomplete Select feature? I've got you covered! In this guide, I'll walk you through the simple steps to create dynamic and responsive select options in Angular 17.

In this example, you'll explore the Angular Material Autocomplete change event. This post provides a straightforward illustration of Angular Material Autocomplete select events, offering a step-by-step explanation. We will delve into using Angular Material Autocomplete click events.

You can effortlessly apply Material Autocomplete on the change event across various Angular versions, including Angular 14, Angular 15, Angular 16, and Angular 17.

Step 1: Set Up Your Angular 17 Project

Begin by creating a new Angular 17 project using the Angular CLI.

ng new angular-autocomplete-select
cd angular-autocomplete-select

Step 2: Install Angular Material

Now, in this step, we simply need to install the Material Design theme in our Angular application. Let's proceed by adding it as shown below.

ng add @angular/material

Installing packages for tooling via npm.

? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink     

   [ Preview: https://material.angular.io?theme=indigo-pink ]

? Set up global Angular Material typography styles? Yes

? Set up browser animations for Angular Material? Yes

Step 3: Create Autocomplete Component

Build a new Angular component specifically for the autocomplete select option.

src/app/app.module.ts

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

import { AppComponent } from './app.component';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

import {MatAutocompleteModule} from '@angular/material/autocomplete';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports:      [
    BrowserModule, 
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatInputModule,
    MatAutocompleteModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

src/app/app.component.html

<h1>How to Create Autocomplete Select Options Angular 17 - Vidvatek</h1>

<form class="example-form">
  <mat-form-field>
     <input 
        type="text" 
        placeholder="Enter Location" 
        [formControl]="myControl"
        matInput
          [matAutocomplete]="auto">
      <mat-autocomplete #auto="matAutocomplete">
          <mat-option 
            *ngFor="let option of filteredOptions | async" 
            [value]="option"
            (onSelectionChange)="onSelFunc(option)">
            {{option}}
         </mat-option>
     </mat-autocomplete>
  </mat-form-field>
</form>

src/app/app.component.ts

import { Component, OnInit } from '@angular/core';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';
import {FormControl} from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
    title = 'my-app';
    myControl = new FormControl();
    options: string[] = [
        "Audi",
        "BMW",
        "Chevrolet",
        "Ford",
        "Honda",
        "Mercedes",
        "Nissan",
        "Toyota",
    ];
    filteredOptions: Observable;


    ngOnInit() {
      this.filteredOptions = this.myControl.valueChanges
        .pipe(
          startWith(''),
          map(value => this._filter(value))
        );
    }

    private _filter(value: string): string[] {
      const filterValue = value.toLowerCase();

      return this.options.filter(option => option.toLowerCase().includes(filterValue));
    }

    onSelFunc(option){
      console.log(option);
    }
}

Step 4: Test and Refine

Test your Angular app by serving it.

ng serve

Conclusion:

In wrapping up, creating Autocomplete Select options in Angular 17 was a breeze! Now, users can effortlessly navigate and select options, improving the overall user experience of my application.

Angular Material makes it simple, and the dynamic responsiveness adds a touch of elegance to the interface.

Cheers to an enhanced UI!