Angular 10 Tutorial #6 - Install Angular Material in Angular App | Angular 10 Tutorial For Beginners
¿Cómo instalar Angular Material en aplicaciones Angular?
Introducción a la serie de tutoriales
- Bienvenida a la serie de tutoriales sobre Angular 10, dirigida a principiantes absolutos. En este episodio se aprenderá a instalar Angular Material.
- Se menciona que hay alrededor de 100 tutoriales planeados para dominar Angular 10 y se invita a los espectadores a revisar el enlace de la lista de reproducción y el código en GitHub.
Instalación de Angular Material
- La instalación de Angular Material es sencilla y se realiza mediante un comando
ng. El comando específico esng add @angular/material.
- Al ejecutar el comando, se presentarán opciones como elegir un tema predefinido o uno personalizado. Se recomienda seleccionar un tema básico como "indigo pink" para principiantes.
Configuración adicional durante la instalación
- Se pregunta si se desea configurar la tipografía global de Angular Material; al aceptar, se vincula la fuente Roboto en el archivo index.html.
- También se pregunta sobre las animaciones del navegador para Angular Material; se sugiere aceptar esta opción.
Proceso de actualización y finalización
- Durante la instalación, se actualizan archivos importantes como package.json y angular.json, además de importar las configuraciones necesarias.
- Se confirma que los paquetes han sido instalados correctamente y que app.module.ts ha sido actualizado con el módulo de animaciones del navegador.
Verificación de la instalación
- Para verificar si Angular Material está instalado correctamente, se importará el módulo
MatButtonModuleen app.module.ts.
- Se crea un botón utilizando
mat-buttonen app.component.ts para comprobar si tiene el estilo adecuado. Si aparece correctamente, significa que Angular Material está listo para usarse.
Reflexiones finales sobre el proceso
- El enfoque del tutorial es paso a paso; no hay prisa por entender todo al principio. La idea principal es familiarizarse con la instalación antes de profundizar más adelante.
Instalación de Angular Material en Aplicaciones Angular
Proceso de Compilación y Ejecución del Servidor
- La compilación puede tardar debido a la cantidad de paquetes o si es la primera vez que se ejecuta, especialmente al cargar todos los módulos y paquetes de Angular Material.
- Una vez completada la compilación, el servidor de desarrollo de Angular debería estar funcionando en
localhost:4200, permitiendo acceder a la aplicación desde el navegador.
Visualización y Estilo
- Al abrir el navegador en
localhost:4200, se puede observar que los estilos están aplicados correctamente. Para ver más estilos, se sugiere visitarmaterial.angular.iopara explorar diferentes botones.
- Se ha instalado con éxito Angular Material en la aplicación. Se observa un tema indigo y rosa, así como un efecto ripple en los botones, lo que indica que el módulo de botones está funcionando correctamente.
Preparativos para Futuras Lecciones