Angular 7/6 | Add AutoComplete in Angular Application using Angular Material

In this post, we will discuss How to Add and Autocomplete/ Suggestion box in Angular Application. Autocomplete helps a user to see predefined list items to choose from. These items in Autocomplete suggestions can be saved on local component, JSON file or remote results shown as user types in.

Autocomplete is attached to a simple input field which shows values to be filled as we see in chrome browser AutoFill. Data items to show in Autocomplete can be a simple list of an array or a JSON object.

Here we will discuss step by step tutorial on How to add Autocomplete in different scenarios.

Let’s begin…

Create a new Angular project

We will first create a new Angular project with the latest Angular CLI v7.3.8

Make sure you have the latest version on Angular CLI installed

Create a new Angular project

Install Angular Material in project

We are going to add Angular Material Autocomplete in our Angular project. Run following NPM command to install Angular Material

Next, we will add Angular material theme in styles.css

To enable Material animations we need to add BrowserAnimationsModule  in app.module.ts file

Also, add FormsModule & ReactiveFormsModule as we need in Autocomplete.

For Autocomplete we will add three Material modules MatAutocompleteModule , MatFormFieldModule & MatInputModule as well otherwise you may notice console errors.

Add Material Autocomplete in Component

Finally, we will add Angular Material Autocomplete in App component by adding the following template in app.component.html

Simple Autocomplete Example

This will only show Autocomplete items when the user focuses on Input field

There is an Input field with the matInput directive, which will be connected to mat-autocomplete directive through # template variable #auto ( this can be anything you like )

Filter Autocomplete items as user types in Input

To enable the filter on items we will map Autocomplete items then filter them using a custom _filter method

 

 

 

Further, we will discuss how to use remote results in Autocomplete.

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

avatar
  Subscribe  
Notify of