Angular diseña un login y dashboard con angular material en angular 16 desde cero [COMPLETO]

[@franzmiguelsalinas]

Genial!! Me costó el tema del ruteo, pero pude terminar el video con éxito (en 4 días ). Felicidades: Muy buen video. Gracias mil!!

[@alonsonavastack]

Lo importante es que lo lograste, existe hoy día el Standalone pero no quise confundir con el tema para que le entiendan, ahora intenta realizar tu api rest para que sigan complementando esto y en el scss en tu content quita el display Flex para que puedas alterar los componentes. Saludos!

[@sauldaelguzmanhernandez2994]

Gracias por compartir sus conocimientos, ya vamos entendiendo mejor el framework de angular 🙏🏾

[@oquiala]

Excelente video, me sirvió mucho ahora que estoy empezando con Angular, gracias por estos tutoriales tan buenos.👍👏

[@alonsonavastack]

Que bueno que te sirvió, Saludos!

[@raymondav]

Excelente, felicitaciones por aportar tanto conocimiento

[@alonsonavastack]

Gracias, poco a poco ando subiendo contenido. Saludos!

[@alexanderardila8744]

Gracias!! Bro La sacaste del estadio

[@alonsonavastack]

👌

[@jorgeluisfragozagarcia3901]

Gracias, me ahorraste mucho tiempo de investigación. Tenia la necesidad de hacer un sitio web exactamente con la funcionalidad que explicaste.

[@alonsonavastack]

Adelante, ya tienes material para seguir

[@Cejblan]

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

[@alonsonavastack]

Lo hire haciendo en los proximos videos, gracias por tu sugerencia

[@darioquispe915]

waohhh me sirvio de mucho, tienes algun curso donde apliques un ejercicio similar a esto pero con angular 17 ya que me sale por defecto component que module

[@luisfernandodeolazabalsche3317]

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.

[@alonsonavastack]

Buena pregunta... En si no hay problema, porque al final se implementan los guards para permitir el paso y si optimizas tu código a la forma que dices es mas limpio aún, en cada curso que hago enseño de diferentes formas para que conozcan diferentes caminos. Pero es viable a como lo mencionas. Aunque para proyectos ya robustos, no es bueno cargar tantos módulos en un mismo archivo. Espero me haya dado a entender. Saludos! y gracias por darte el tiempo de ver el demo de esta enseñanza.

[@joseantonioamayapostigo2542]

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

[@joseantonioamayapostigo2542]

un poco lioso lo de las rutas pero en lo general muy buen aporte

[@santinunez2497]

buenas una pregunta: el login es responsive? si se adapta a cualquier dispositivo?

[@joseantonioamayapostigo2542]

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

[@alonsonavastack]

Hola! En estos dias he andado estudiando bastante y me habia encontrado algo inactivo en responder dudas. Pero si te sirve dejare un link del dashboard en la descripción para no retrazarte, ya que con la nueva version me encuentro realizando ejercicios y creando videos para su aprendizaje. Saludos

[@alonsonavastack]

Bueno, mejor crearé otro, ya que es muy importante crear nuestros propios dashboards a mano limpia ya que las plantillas suelen ser costosas y complejas de manipular

[@Fogell_]

Porque en el AppModule no importo el commonModule? y al crear otro modulo si lo coloca por defecto en los imports

[@alonsonavastack]

Recuerda que el commonModule solo contiene información para directivas comunes como ngIf y ngFor que se necesitan en la mayoría de las plantillas y no es bueno sobrecargar tus modulos en uno solo. Para que lo entiendas mejor, es como decir que linux le obligues a cargar todos los drivers como windows... Es decir lo hace mas ligero el cargarlo donde se requiere.

[@NataliRamirezMena]

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.

[@alonsonavastack]

Que tal, te recomiendo en todo caso crearlo con javascript tu modal ya que los temas de los modal no hay mucho por hacer entre bootstrap y angular material. y si, te entiendo lo mismo me sucedio con tailwindcss. y la solución rápida fue creando el modal con una funcion en ts y desde ahi mandarlo a llamar en tu boton. Saludos!

[@kreiger8912]

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

[@alonsonavastack]

Que tal, gracias, si se puede, de hecho funcionaria cómo un full screen, pero si ya sería mucho más laborioso. Así es como muchas plantillas vienen, pero ya son de compra.

[@joseantonioamayapostigo2542]

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

[@alonsonavastack]

ya añadí el link de descarga, esta recien probado y funcional al 100% hasta la fecha de hoy, espero continues con tu codigo y solo te apoyes en el para encontrar tu error

[@joseantonioamayapostigo2542]

bueno pues lo probé y si funciona exactamente como el mío pero no se porque no siempre me debe de llevar a la misma pagina bueno a ver si te puedo seguir con el login

[@nathagonzalez8689]

Hola Alonso, me ha costado mucho el ruteo y me sale el error NG04002, me ayudas por favor.... Solamente me sale el login :(

[@nathagonzalez8689]

ya lo pude solucionar, me faltaban unas importaciones, excelente tutorial, gracias Alonso :)

[@alonsonavastack]

@@nathagonzalez8689 Ups! Me ganaste, sucede que ando ahorita trabajando en el nuevo curso de NestJs desde cero y apenas me percate de la notificación. Saludos! que bueno que ya lo lograste resolver

[@alonsonavastack]

Por cierto, agregue un ultimo video despues de este donde les enseño a como darle uso para trabajar ya tranquilamente en su dashboard

[@nathagonzalez8689]

@@alonsonavastack muchasssss gracias por tu maravilloso video, entendí cada parte que nos enseñas, de verdad gracias :)

[@nathagonzalez8689]

@@alonsonavastack siiiiiii ¡qué nota! lo voy a ver de inmediato, gracias Alonso :) :)

[@luiscevallos1]

Muchas Gracias Bro pero podrias poner estos videos en una lista y ordenados muchas gracias.

[@alonsonavastack]

Hola! Si entras a mi canal, hay un video con la misma imagen de estos videos el cual tiene 2hrs + ahi viene todo unido, pensando en omitir ese paso y dejarselos todo en un solo video. Saludos!

[@luiscevallos1]

@@alonsonavastack En serio muchas gracias ya lo voy a ver

[@joseantonioamayapostigo2542]

te comento la plantilla de github esta completamente vacia no hay codigo en e los archivos.ts ni en los css

[@joseantonioamayapostigo2542]

he vuelto a intentar lo de el tema de rutas y me aparece la pantalla en blanco y me da 2 errores parecidos :Error: Uncaught (in promise): Error: ASSERTION ERROR: Provided Component class doesn't contain Component definition. Please check whether provided class has @Component decorator. [Expected=> null != null

[@alonsonavastack]

@@joseantonioamayapostigo2542 Si estás trabajando con standAlone, y comúnmente debes mandas a llamar el componente que requieres. Parece que subiré algo sobre este temas con angular reciente

[@JHONTHERAP]

a mi no me aparece app.module.ts tengo angular 17 y node 20.9

[@alonsonavastack]

Ahora tienes que hacer la importación en el componente dónde vayas a utilizar esa dependencia