Autocomplete using angular material in angular 12. In this tutorial, i am going to show you complete guide on how to create autocomplete search using angular material in the angular 12 app.
Autocomplete is a search feature where the search engine predicts the user’s query and provides suggestions as the user types. The user can select any of the autocomplete suggestions and be taken to results without having to manually type every character.
In this angular 12 autocomplete example; you will learn step by step on how to build autocomplete search using external APIS with angular material in angular 12 app.
Autocomplete Search with Material In Angular 12 Example
- Step 1 – Create New Angular App
- Step 2 – Import Modules on Module.ts File
- Step 3 – Add Code on View File
- Step 4 – Add Code On Component ts File
- Step 5 – Create Services
- Step 6 – Start Angular App
Step 1 – Create New Angular App
Execute the following command on terminal to install angular app:
ng new my-new-app
Then execute the following command on terminal to install angular material:
ng add @angular/material
Step 2 – Import Modules on Module.ts File
Go to 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 3 – Add Code on View File
Create simple reactive form with input field for autocomplete search. So, visit src/app/app.component.html and update the following code into it:
<h1>Angular 12 material autocomplete search with API example - Laratutorials.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 4 – Add Code On Component ts File
Go to 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 5 – Create Service
Create services; so go to src/app/ directory and open or create post.service.ts. Then add the following code into 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 5 – Start Angular App
Execute the following commands on terminal to start angular app:
ng serve