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
- How to use material chips(tags) in Angular?
- How to implement material spinner in Angular?
- Angular 12 autocomplete with API Data
- Angular 12 TinyMCE integration with an example
- Angular 12 Material Tabs Tutorial with Example
- Angular 12 Material Autocomplete Example
- Angular 12 Material Dialog Example
- How to bind HTML inside the angular binding?
- Angular 12 Bootstrap Responsive Carousel slider
- Angular 12 modal popup example with Bootstrap 4