Angular diseña un login y dashboard con angular material en angular 16 desde cero
En este artículo, aprenderás cómo diseñar un sistema de login y un dashboard utilizando Angular Material en la versión 16 de Angular desde cero. Angular Material es una librería de componentes UI que proporciona una amplia gama de elementos de diseño para construir aplicaciones web con un aspecto moderno y funcional.
Requisitos previos
Para comenzar, es importante tener instalado Node.js en tu sistema. Puedes descargarlo desde su sitio web oficial y seguir las instrucciones para la instalación. Luego, puedes instalar Angular CLI mediante el siguiente comando en tu terminal:
npm install -g @angular/cli
Creación de un nuevo proyecto
Una vez instalado Angular CLI, podemos crear un nuevo proyecto Angular con el siguiente comando:
ng new nombre-del-proyecto
Esto creará una estructura de carpetas y archivos para nuestro proyecto. Luego, nos ubicamos en la carpeta del proyecto con el comando:
cd nombre-del-proyecto
Instalación de Angular Material
Para utilizar Angular Material en nuestro proyecto, necesitamos instalarlo con el siguiente comando:
ng add @angular/material
Esto nos guiará a través de un asistente para seleccionar los componentes que queremos usar en nuestra aplicación. Una vez completado, Angular Material estará listo para usarse en nuestro proyecto.
Diseño del sistema de login
Para diseñar el sistema de login, crearemos un nuevo componente con el siguiente comando:
ng generate component login
Esto nos generará los archivos necesarios para el componente de login. Luego, podemos utilizar los componentes de Angular Material, como los campos de texto, los botones y las validaciones, para diseñar la interfaz de inicio de sesión.
Creación del dashboard
Para el dashboard, también crearemos un nuevo componente con el siguiente comando:
ng generate component dashboard
Luego, utilizaremos los componentes de Angular Material para diseñar una interfaz elegante y funcional para nuestro panel de control. Podremos utilizar gráficos, tablas y otros elementos visuales para mostrar información relevante a los usuarios.
Conclusiones
En este artículo, hemos aprendido a diseñar un sistema de login y un dashboard utilizando Angular Material en la versión 16 de Angular desde cero. Con este conocimiento, podrás construir aplicaciones web modernas y eficientes con una interfaz atractiva para tus usuarios. ¡Esperamos que esta guía te haya sido útil!
a mi no me aparece app.module.ts tengo angular 17 y node 20.9
no he podido de dar con el error de mi plantilla sobre todo en lo del routing ,voy a intentar que navegue de otra manera a ver si asi puedo seguirte en esta ultima parte,porque yo le pongo al navegador esto y me lleva a la pagina principal-: localhost:4200/dashboard/student/students,
y creo que asi no debe de funcionar
bueno pues salvado lo del menu, ahora estoy en lo del routing que no sale vaya … a ver si lo hago de otra manera porque con esta lo veo muy complicado para lo que es, que es la navegación a ver si lo repito vaya
hola amigo interesante tutorial pero a mi no me sale lo de el menu en el tiempo 1:26:46 el menu hamburguesa no sale solo al principio pero despues desaparece y no aparece más ..??
Porque en el AppModule no importo el commonModule? y al crear otro modulo si lo coloca por defecto en los imports
Cree un proyecto con tu tutorial, pero tengo un componente llamado usuario.component.html y quiero abrir un modal con Bootstrap al abrirlo, me pone la pantalla en negro, bloquea la interacción con el modal y lo pone debajo del componente page.component.html ya revise css, y no tiene algo que este encima, me podrías ayudar con la duda.
Muy bueno el video. ¿Sabes que lo puede volver mejor? que especifiques en youtube cada sección, y listo. Cada vez que entro ando picando donde más o menos me acordaba que era lo que necesito
Gracias, me ahorraste mucho tiempo de investigación. Tenia la necesidad de hacer un sitio web exactamente con la funcionalidad que explicaste.
Gracias por compartir sus conocimientos, ya vamos entendiendo mejor el framework de angular 🙏🏾
buenas una pregunta: el login es responsive? si se adapta a cualquier dispositivo?
Gracias!! Bro La sacaste del estadio
Excelente, felicitaciones por aportar tanto conocimiento
Hola Alonso, me ha costado mucho el ruteo y me sale el error NG04002, me ayudas por favor…. Solamente me sale el login 🙁
Muchas Gracias Bro pero podrias poner estos videos en una lista y ordenados muchas gracias.
Excelente video, me sirvió mucho ahora que estoy empezando con Angular, gracias por estos tutoriales tan buenos.👍👏
Buenísimo gracias, te quería consultar se puede hacer que cargue en leazy loading el componente Pages –> path: 'dashboard', component: PagesComponent,
children: […. ya que lo carga al mismo tiempo que se carga el login, así evitar esta carga si no se puede logear la persona, quedo a la espera de lo que me digas al respecto muchas gracias.
Genial!!
Me costó el tema del ruteo, pero pude terminar el video con éxito (en 4 días ).
Felicidades: Muy buen video.
Gracias mil!!
puedo o se puede hacerlo de otra manera, ejemplo. que una barra lateral domine el espacio de altura, y la borra superior. al momento de dar click. se oculte la barra lateral y la barra superior domine al ancho. en teoria es posible … Muchas gracias por la informacion siguiere mirando tus videos