Autocomplete select example for a form with Angular Material and Angular Universal

When we build a form and need to include a long list of options in a select field, autocomplete is a very useful enhancement. It speeds up data entry and improves user experience.

In this tutorial we will reproduce the following form:

Why autocomplete improves a form

A normal select works well with five or ten options, but it becomes slow when the list grows. Autocomplete lets the user type a few letters, reduces visual noise and avoids forcing people to scroll through a long list of values.

In real projects this pattern is useful for departments, cities, products, customers, tags or any catalog where the value must be selected from controlled data but the user needs a fast search experience.

You can download the previous example form from the following repository https://github.com/al118345/formulario-angular-autocompletado-con-angular-universal

Angular Material installation

The ideal option is to perform a clean installation with the following command:

ng add @angular/material

However, it may fail in some setups. If that happens, I recommend the following installation instead:

npm install @angular/material --force --save

Once installed, you need to add the Angular Material CSS file to angular.json under styles.

After the styles are available, add the required imports in app.module.ts like this:

Form example

Once installed, you can add the following code to component.ts:

This code manages the autocomplete select. The mat_filter function is responsible for searching inside the array.

And in the view apply the following implementation:

This template simply associates each component with the variables and functions required to perform autocomplete.

Angular Universal and form rendering

The example keeps the main form, label and code explanation in the initial HTML, so the page remains understandable for crawlers even before the browser hydrates the Angular Material interaction.

Practical improvements for production

For a production form, validate the selected value, show an empty-state message when there are no matches, avoid loading very large lists in the first bundle and consider querying the backend when the catalog contains thousands of records.

Accessibility details

The field should keep a clear label, keyboard navigation and predictable focus behavior. Autocomplete is fastest when it helps expert users, but it must still be understandable for users who navigate with the keyboard or assistive technology.

Related Angular guides

This example fits naturally with the Angular routing and API articles because forms usually need crawlable routes, validation, backend data and SSR-aware component loading. Angular routing, Angular APIs.