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.
Begin by creating a new Angular 17 project using the Angular CLI.
ng new angular-autocomplete-select
cd angular-autocomplete-select
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.
Installed 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
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);
}
}
Test your Angular app by serving it.
ng serve
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!
You might also like:
- Read Also: 10 Digit Mobile Number Validation in Angular 17
- Read Also: How to Create Autocomplete Search in React
- Read Also: How To Create Dynamic Bar Chart In Laravel 10
- Read Also: How to Create Modal in Laravel 10 Livewire