Angular Material 7 - Auto-Complete

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. <mat-autocomplete> can be used to provide search results from local or remote data sources.

In this chapter, we will showcase the configuration required to draw a autocomplete control using Angular Material.

Create Angular Apppcation

Follow the following steps to update the Angular apppcation we created in Angular 6 - Project Setup chapter −

Following is the content of the modified module descriptor app.module.ts.

import { BrowserModule } from  @angular/platform-browser ;
import { NgModule } from  @angular/core ;
import { AppComponent } from  ./app.component ;
import {BrowserAnimationsModule} from  @angular/platform-browser/animations ;
import {MatAutocompleteModule,MatInputModule} from  @angular/material ;
import {FormsModule, ReactiveFormsModule} from  @angular/forms ;
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatAutocompleteModule,
      MatInputModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Following is the content of the modified HTML host file app.component.html.

<form class = "tp-form">
   <mat-form-field class = "tp-full-width">
      <input type = "text" 
         placeholder = "US State" 
         aria-label = "Number" 
         matInput 
         [formControl] = "myControl" 
         [matAutocomplete] = "auto">
      <mat-autocomplete #auto = "matAutocomplete">
         <mat-option *ngFor = "let state of states" [value] = "state.value">
            {{state.display}}
         </mat-option>
      </mat-autocomplete>
   </mat-form-field>
</form>

Following is the content of the modified CSS file app.component.css.

.tp-form {
   min-width: 150px;
   max-width: 500px;
   width: 100%;
}
.tp-full-width {
   width: 100%;
}

Following is the content of the modified ts file app.component.ts.

import { Component } from  @angular/core ;
import { FormControl } from "@angular/forms";
@Component({
   selector:  app-root ,
   templateUrl:  ./app.component.html ,
   styleUrls: [ ./app.component.css ]
})
export class AppComponent {
   title =  materialApp ;
   myControl = new FormControl();
   states;
   constructor(){
      this.loadStates();
   }
   //build pst of states as map of key-value pairs
   loadStates() {
      var allStates =  Alabama, Alaska, Arizona, Arkansas, Capfornia, Colorado, Connecticut, Delaware,
         Florida, Georgia, Hawaii, Idaho, Ilpnois, Indiana, Iowa, Kansas, Kentucky, Louisiana,
         Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,
         Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Caropna,
         North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Caropna,
         South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,
         Wisconsin, Wyoming ;
      this.states =  allStates.sppt(/, +/g).map( function (state) {
         return {
            value: state.toUpperCase(),
            display: state
         };
      });
   }
}

Result

Verify the result.

Details

As first, we ve created an input box and bind an autocomplete named auto using [matAutocomplete] attribute.

Then, we ve created an autocomplete named auto using mat-autocomplete tag.

As next, using *ng For loop, options are created.