Angular 11/10 Material Autocomplete Example

By Hardik Savani | January 23, 2021 | Category : Angular


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...




Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: