In general Autocomplete or Auto, suggestion control is used to show/ fetch related items from a local or remote server as user types to make a selection from available items.
In this tutorial, we will discuss the angular-ng-autocomplete package using which we can easily implement a fully-featured autocomplete without using any third party framework like Material or Bootstrap.
This package provides many inbuilt features to make Autocomplete control more user-friendly for a user.
In this tutorial, we will implement a very simple Autocomplete feature which is also known as TypeAhead or Suggestion search bar. Typeahead is basically an Input field where user can type and get matching results in a dropdown list to select from.
Adding a suggestion or Autocomplete field is useful where we have a large data to show up which can’t we be accommodated in tradition select dropdowns. Autocomplete lists really optimize DOM structure by preventing a dump of large data on the client-side.
In the Angular Material tutorial, we’re going to discuss how to create a Material Autocomplete showing suggestion results by using the mat-autocomplete component in Angular 10/9/8/7/6/5/4 application.
An Autocomplete control looks similar to an input field but it helps a user to select a suggestion matching from a typed string. The list of predefined suggestions shown to the user can be saved on local, in a JSON file or can be fetched from a remote server database.
The Angular Material UI library provides a wide variety of components, today we will discuss Material’s Autocomplete UI component. Material Autocomplete can be added in the template component using the mat-autocomplete directive component.
We’ll create a new Angular 9 project using the latest version of the Angular CLI tool, install and setup the Material UI library. After that, we will start from a basic Autocomplete then move to advanced implementation with available configurations.