Angular 16 Material Autocomplete Tutorial

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