Autocomplete input search using material; In this tutorial, you will learn how to create autocomplete input search using angular material in angular 16 apps.
Angular 16 Autocomplete Input using Material ui Tutorial
Steps to implement autocomplete input search using material ui library in angular 16 apps:
- Step 1 – Create New Angular 16 App
- Step 2 – Install Material Package
- Step 3 – Import Modules in Module.ts File
- Step 4 – Create Autocomplete Input Search on View File
- Step 5 – Add Code On Component ts File
- Step 6 – Create Services
- Step 7 – Start Angular App
Step 1 – Create New Angular 16 App
First of all, open your terminal or cmd and run the following command on it to install angular app:
ng new my-new-app
Step 2 – Install Material Package
Once you have installed the angular app into your system. Next, you need to run the following command on terminal or cmd to install angular material:
ng add @angular/material
Step 3 – Import Modules in Module.ts File
Once you have installed angular material, you need to import material in module.ts. So visit src/app directory and open app.module.ts file. Then add the following code into it:
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';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatFormFieldModule,
MatInputModule,
MatAutocompleteModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Step 4 – Create Autocomplete Input Search on View File
Now, you need to create simple reactive form to get input values of autocomplete search. So, visit src/app/app.component.html and update the following code into it:
<h1>Angular 16 material input autocomplete with API example - Tutsmake.Com</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.name">
{{option.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
Step 5 – Add Code On Component ts File
Next, you need to visit the src/app directory and open app.component.ts. Then add the following code into component.ts file:
import { Component } from '@angular/core';
import {Observable} from 'rxjs';
import { startWith, debounceTime, distinctUntilChanged, switchMap, map } from 'rxjs/operators';
import {FormControl} from '@angular/forms';
import { PostService } from './post.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
myControl = new FormControl();
options = [];
filteredOptions: Observable;
constructor(private service: PostService) {
this.filteredOptions = this.myControl.valueChanges.pipe(
startWith(''),
debounceTime(400),
distinctUntilChanged(),
switchMap(val => {
return this.filter(val || '')
})
)
}
filter(val: string): Observable {
return this.service.getData()
.pipe(
map(response => response.filter(option => {
return option.name.toLowerCase().indexOf(val.toLowerCase()) === 0
}))
)
}
}
Step 6 – Create Service
Next, you need to create a service for material autocomplete. So visit the src/app/ directory and open or create post.service.ts. Then add the following code to post.service.ts file:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { tap, map } from 'rxjs/operators';
import { of } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class PostService {
constructor(private http: HttpClient) { }
opts = [];
getData() {
return this.opts.length ?
of(this.opts) :
this.http.get('https://jsonplaceholder.typicode.com/users').pipe(tap(data => this.opts = data))
}
}
Step 7 – Start Angular App
Finally, run the following commands on terminal or cmd to start angular app:
ng serve
Open your browser and navigate to http://localhost:4200 to see your autocomplete component in action.
Conclusion
Congratulations you have learned how to create an autocomplete input search in angular 16 apps using angular material.
Recommended Angular Tutorials
