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!
Top comments (0)