Angular 11/10 Material Autocomplete Example

Hi,

This tutorial will provide example of angular 10 material autocomplete example. if you have question about angular 11 material autocomplete example then i will give simple example with solution. you will learn autocomplete input angular 11 material example. this example will help you angular material 11/10 input autocomplete example.

I’m going to show you about angular material mat-autocomplete reactive form. if you have question about angular material input autocomplete example then i will give simple example with solution.

I will give you two simple example with angular:

1) Basic Angular Material Autocomplete

2) Angular Material Autocomplete with Filter

You can see bellow layout for demo:

Create New App

If you are doing example from scratch then You can easily create your angular app using bellow command:

ng new app-material

Add Material Design

Now in this step, we need to just install material design theme in our angular application. so let's add as like bellow:

ng add @angular/material

Cmd like bellow:

Installing packages for tooling via npm.
Installed packages for tooling via npm.
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink     
   [ Preview: https://material.angular.io?theme=indigo-pink ]
? Set up global Angular Material typography styles? Yes
? Set up browser animations for Angular Material? Yes

Example 1: Basic Angular Material Autocomplete

Here, we will create very simple example. first we need to import MatAutocompleteModule for mat-autocomplete material design. so let's update app.module.ts, app.component.ts and app.component.html.

Let's follow step:

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
     
import { AppComponent } from './app.component';
  
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';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports:      [
    BrowserModule, 
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatInputModule,
    MatAutocompleteModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

src/app/app.component.html

<h1>angular material input autocomplete - ItSolutionStuff.Com</h1>
   
<mat-form-field>
   <input type="text" placeholder="Enter Location" matInput
        [matAutocomplete]="auto">
      <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let option of options" [value]="option">
          {{option}}
       </mat-option>
   </mat-autocomplete>
</mat-form-field>

src/app/app.component.ts

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
  
export class AppComponent {
    title = 'my-app';
  
    options: string[] = [
      'Rajkot',
      'Surat',
      'Delhi', 
      'Mumbai', 
      'Banglore'
    ];
}

Example 2: Angular Material Autocomplete with Filter

Here, we will create very simple example using reactive form. first we need to import MatFormFieldModule, MatInputModule, MatAutocompleteModule, FormsModule and ReactiveFormsModule for mat-autocomplete material design. so let's update app.module.ts, app.component.ts and app.component.html.

Let's follow step:

src/app/app.module.ts

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';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports:      [
    BrowserModule, 
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatInputModule,
    MatAutocompleteModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

src/app/app.component.html

<h1>angular material input autocomplete example - ItSolutionStuff.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">
              {{option}}
           </mat-option>
       </mat-autocomplete>
    </mat-form-field>
</form>

src/app/app.component.ts

import { Component, OnInit } from '@angular/core';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';
import {FormControl} from '@angular/forms';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
  
export class AppComponent implements OnInit {
    title = 'my-app';
    myControl = new FormControl();
    options: string[] = [
      'Rajkot',
      'Surat',
      'Vapi',
      'Bhavnagar',
      'Delhi', 
      'Mumbai', 
      'Banglore'
    ];
    filteredOptions: Observable;
  
    ngOnInit() {
      this.filteredOptions = this.myControl.valueChanges
        .pipe(
          startWith(''),
          map(value => this._filter(value))
        );
    }
  
    private _filter(value: string): string[] {
      const filterValue = value.toLowerCase();
  
      return this.options.filter(option => option.toLowerCase().includes(filterValue));
    }
}

You can easily run by following command:

ng serve

I hope it can help you...