Home » Angular 12 Material Autocomplete Example

Angular 12 Material Autocomplete Example

Angular 12 Material Autocomplete Tutorial: Angular Material is the most popular UI components library, it provides many ready-to-use UI components today we will learn Material’s Autocomplete UI component

The Autocomplete UI component provides the facility to select a recommended options to the user when the user type on the textbox

You can download the working example of Angular 12 Material Autocomplete https://github.com/technostuf/angular-material-autocomplete-example

Angular 12 Material Autocomplete

  • Step 1 – Create a new Angular 12 app
  • Step 2 – Install Angular Material Library
  • Step 3 – Import the modules
  • Step 4 – Add code in the view file
  • Step 5 – Add code in the componet ts file
  • Step 6 – Run an Angular 12 application

Step 1 – Create a new Angular 12 app

The first step is to open your terminal and execute the below command to create a new Angular 12 app.

 ng new material-autocomplete

Step 2 – Install Angular Material Library

Use the below command to install and configure the Material library in the angular 12 project

 ng add @angular/material

After running the above command, it will ask you to select a material theme and select the whatever theme you like, for now i choose a indigo-pink theme and we also needs to import the theme css into our main style.css

/* You can add global styles to this file, and also import other style files */

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Step 3 – Import the modules

In this step, we’ll import MatAutocompleteModule in the app, This directive is used to build a autocomplete dropdown in our angular 12 projects, we will also import the MatInputModule, MatFormFieldModule from the material library for creating an input field

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { ReactiveFormsModule, FormsModule  } from '@angular/forms';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatAutocompleteModule } from '@angular/material/autocomplete';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatInputModule,
    MatFormFieldModule,    
    MatAutocompleteModule,
    FormsModule, 
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4 – Add code in the view file

Open the src\app\app.component.html file and add the below code to generate the textbox for getting input

<mat-form-field style="width: 300px; margin: 50px auto; display: block;">
  <input type="text" placeholder="Countries" matInput [formControl]="formControl" [matAutocomplete]="auto">
  <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
    <mat-option *ngFor="let item of autoFilter | async" [value]="item">
      {{item}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

Step 5 – Add code in the componet ts file

Open the src\app\app.component.ts file and add below code, As shown below Items is a countries array and mat_filter function will filter the values items array

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

import {map, startWith} from 'rxjs/operators';
import {Observable} from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'material-autocomplete';
  formControl = new FormControl();
  autoFilter: Observable<string[]>;
  Items: string[] = ['Japan', 'Germany', 'Switzerland', 'Australia', 'Austria', 'Norway', 'Finland'];

  ngOnInit(): void { 
    this.autoFilter = this.formControl.valueChanges.pipe(
      startWith(''),
      map(value => this.mat_filter(value))
    );    
  }

  private mat_filter(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.Items.filter(option => option.toLowerCase().indexOf(filterValue) === 0);
  }
}

Step 6 – Run an Angular 12 application

Execute the following command on the terminal run the angular app

 ng serve

You can download the working example of Angular 12 Material Autocomplete

https://github.com/technostuf/angular-material-autocomplete-example

Related Post

Leave a Comment

Your email address will not be published.

1 × 4 =