¿Cómo usar stepper de Angular Material? — Angular 9
Actualmente he usado este framework para desarrollos robustos (GRANDES) y quise implementar este componente para reducir tiempo y claro lineas de código.
Iniciaremos con lo básico que es creando nuestro proyecto de Angular
Creando nuestro proyecto de Angular
Para crear nuestro proyecto de Angular debemos de tener instalado previamente en nuestro equipo Angular CLI para hacer uso de los comandos
Creamos nuestro proyecto de prueba en una terminal de comando con el ng new el cual nos crea o genera el proyecto
Luego nos solicitara dos cosas:
1. Usar el modulo de rutas, lo cual para este ejemplo no lo usaremos y, por lo tanto, le diremos que no.
2. Nos dirá que si queremos usar CSS, SCSS, SASS o LESS. Yo usaré SCSS
Instalación Angular Material
Este comando nos va añadir los componentes a usar en el proyecto
Al ejecutarlo nos va a decir si usaremos la tipografía y las animaciones, en mi caso solo usare las animaciones
Importar modulo Stepper
Nos dirigimos a nuestro app.module.ts que se encuentra dentro de la carpeta app y allí importamos el modulo a usar el cual es Stepper. Para importar este módulo lo hacemos de la siguiente forma
Y en nuestro NgModule en los imports, importamos el modulo que vamos a usar el cual debe de llevar el mismo nombre que esta en nuestro import de la parte superior (MatStepperModule)
Uso del Stepper
Para comprobar de que nuestro stepper este funcionando, usaremos su componente. En mi caso como estoy realizando solo una prueba lo agrego al app.component.html.
Guardamos nuestro cambios y realizamos el siguiente comando dentro de la terminal de comandos, el cual es ng serve -o; este comando lo que hará es crearnos un servidor local el cual nos va a compilar nuestro proyecto y el “-o” lo que hace es que cuando termine de compilar abra el proyecto rápidamente en nuestro navegador predeterminado.
Visualizando nuestro componente
Después de haber realizado todos estos pasos podemos probar en nuestro navegador y debió de haber quedado algo mas o menos así
Espero les haya servido esta guía sobre ¿Cómo usar stepper de Angular Material? — Angular 9 😎. Si tienes dudas, inquietudes o añadir algo sobre esta configuración puedes dejar tu comentario.
