Angular 12 Material Autocomplete Tutorial with Example

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

Recommended Angular Tutorials