ItSolutionStuff.com

Angular Material Input Autocomplete Example

By Hardik Savani • May 2, 2024
Angular

Today our leading topic is angular material autocomplete example. you can understand a concept of angular material mat-autocomplete. This tutorial will give you simple example of angular material autocomplete example. In this article, we will implement a autocomplete input angular material example. Here, Creating a basic example of angular material 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.

you can easily use input autocomplete with the material in angular 6, angular 7, angular 8, angular 9, angular 10, angular 11, angular 12, angular 13, angular 14, angular 15, angular 16 and angular 17.

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

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

šŸ“ŗ Subscribe on YouTube

We Are Recommending You

ā˜…

Angular Material Input Mask Date Example

Read Now →
ā˜…

Angular Material Datepicker Change Event Example

Read Now →
ā˜…

Angular Material Datepicker Disable Specific Dates Example

Read Now →
ā˜…

Angular Material Datepicker Disable Previous Dates Example

Read Now →
ā˜…

Angular 11 Install Material Design Tutorial

Read Now →
ā˜…

Angular 11/10 Material Card Example

Read Now →
ā˜…

Angular Material Multi Step Form Example

Read Now →
ā˜…

Angular Material Tooltip Example

Read Now →
ā˜…

Angular Material Slide Toggle Example

Read Now →
ā˜…

Angular Material Radio Button Example

Read Now →
ā˜…

Angular Material Input Box Example

Read Now →