Ejemplo de select autocompletado para un formulario con Angular Material y SSR
Cuando programamos un formulario en una web y necesitamos incluir una serie de opciones en una etiqueta select es muy interesante añadir la funcionalidad de autocompletar. De esta forma podemos agilizar la introducción de datos y, por lo tanto, mejorar la experiencia de nuestros usuarios.
En este tutorial os vamos a enseñar a reproducir el siguiente formulario:
Por qué el autocompletado mejora un formulario
Un select tradicional funciona bien con cinco o diez opciones, pero se vuelve lento cuando la lista crece. El autocompletado permite escribir unas letras, reduce ruido visual y evita obligar al usuario a recorrer una lista demasiado larga.
En proyectos reales este patrón encaja con departamentos, ciudades, productos, clientes, etiquetas o cualquier catálogo donde el valor debe salir de datos controlados pero la experiencia necesita búsqueda rápida.
Configuración actual de Angular Material
En un proyecto Angular nuevo, instala Material con ng add @angular/material. El schematic alinea las dependencias de Material, CDK y Angular y configura el tema y las animaciones elegidos.
ng add @angular/materialLos componentes Angular nuevos son standalone por defecto. Importa MatAutocomplete, MatOption, MatInput y las directivas de formularios utilizadas por la plantilla en el array imports del componente. Los proyectos con NgModule siguen siendo compatibles, pero app.module.ts ya no es el punto de partida habitual.
No soluciones un conflicto de peer dependencies con --force. Comprueba que Angular, Angular Material y CDK utilizan versiones principales compatibles, actualízalos conjuntamente y atiende el conflicto real que indique el gestor de paquetes.
Referencias oficiales: instalación de Angular Material, documentación de autocomplete e imports de componentes standalone. Angular Material, MatAutocomplete, Angular components.
Instalación Angular Material
Implementación histórica conservada
Las notas de instalación y el código siguientes pertenecen al ejercicio original basado en NgModule. Se mantienen para comparar y mantener proyectos antiguos; para código nuevo utiliza la configuración actual indicada arriba.
Lo ideal es realizar una instalación limpia con el siguiente comando: ng add @angular/material El ejercicio original proponía la siguiente instalación forzada cuando fallaba la resolución de dependencias. Se conserva como material histórico y no se recomienda en un proyecto actual: npm install @angular/material --force --save El proyecto original registraba después un tema predefinido en angular.json. Actualmente, ng add suele realizar la configuración del tema elegido.Ejemplo de formulario
Una vez instalado, quedará añadir al componente.ts el siguiente código:Angular SSR y renderizado del formulario
El ejemplo mantiene el formulario principal, la etiqueta y la explicación del código en el HTML inicial, de forma que la página sigue siendo comprensible para buscadores antes de que el navegador hidrate la interacción de Angular Material.
Mejoras prácticas para producción
En un formulario real conviene validar el valor seleccionado, mostrar un mensaje cuando no haya coincidencias, evitar cargar catálogos enormes en el primer bundle y consultar al backend si la lista contiene miles de registros.
Detalles de accesibilidad
El campo debe mantener una etiqueta clara, navegación por teclado y un comportamiento de foco previsible. El autocompletado acelera a usuarios expertos, pero también debe ser comprensible para quien navega con teclado o tecnología de asistencia.
Guías Angular relacionadas
Este ejemplo conecta con los artículos de routing y APIs en Angular porque los formularios suelen necesitar rutas rastreables, validación, datos de backend y carga de componentes compatible con SSR. routing Angular, APIs en Angular.