Angular 14 Autocomplete Tutorial with Material Library

Angular 14 autocomplete using material; Through this tutorial, i am going to show you how to implement autocomplete search using angular material in angular 14 apps.

Angular 14 Autocomplete Tutorial with Material Library

Follow the below given steps to create autocomplete search using 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

Run the following command on terminal to install angular app:

ng new my-new-app

Step 2 – Install Material Package

Run 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

Go to src/app/app.component.html and update the following code into it:

<h1>Angular 14 material input autocomplete 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 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

Run the following commands on terminal to start angular app:

ng serve

Related Tutorials