Angular 14 Material Autocomplete Tutorial Example

Angular 14 autocomplete using material; Through this tutorial, we will learn how to implement autocomplete search using angular material in angular 14 apps.

The <mat-autocomplete>, an Angular Directive, is used as a special input control with an inbuilt dropdown to show all possible matches to a custom query. This control acts as a real-time suggestion box as soon as the user types in the input area.

Angular 14 Autocomplete Search with Material Example

Just follow the following steps to create autocomplete search using the material library in angular 14 apps; as follows:

Step 1 – Create New Angular App
Step 2 – Install Material Package
Step 3 – Import Modules in Module.ts File
Step 4 – Create Autocomplete HTML 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 App

First of all, open terminal or command line and execute the following command on it to install angular app:

ng new my-new-app

Step 2 – Install Material Package

Then execute the following command on terminal to install angular material:

ng add @angular/material

Step 3 – Import Modules in 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 4 – Create Autocomplete Html on View File

Create simple reactive form to get input values of autocomplete search. So, go to src/app/app.component.html and update the following code into it:

<h1>Angular 14 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

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 6 – Create Service

Go to the 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 7 – Start Angular App

In this step, execute the following commands on terminal to start angular app:

ng serve

Open the browser, hit the below URL into it:

http://localhost:4200

Conclusion

Through this tutorial, we have learned how to implement autocomplete search using angular material in angular 14 apps.