Autocomplete select example for a form with Angular Material and SSR

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

Current Angular Material setup

For a new Angular project, install Material with ng add @angular/material. The schematic aligns the Material, CDK and Angular dependencies and configures the selected theme and animations.

ng add @angular/material

New Angular components are standalone by default. Import MatAutocomplete, MatOption, MatInput and the form directives used by the template in the component imports array. NgModule-based projects remain supported, but app.module.ts is no longer the default starting point for new applications.

Do not solve a peer-dependency conflict with --force. Check that Angular, Angular Material and the CDK use compatible major versions, update them together and let the package manager report a genuine incompatibility.

Official references: Angular Material setup, autocomplete documentation and standalone component imports. Angular Material, MatAutocomplete, Angular components.

Angular Material installation

Historical implementation preserved

The following installation notes and code belong to the original NgModule-based exercise. They are preserved for comparison and maintenance of older projects; use the current setup above for new code.

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

ng add @angular/material

The original exercise proposed the following forced installation when dependency resolution failed. It is kept as historical material and is not recommended for a current project:

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

The original project then registered a prebuilt theme in angular.json. Current ng add setup normally performs the selected theme configuration for you.

This is the original NgModule import example. In a new standalone component, place only the required Material and form dependencies in its imports array.

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 SSR 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.