Angular. ¿Cómo crear el Login?. components + routing + forms + services + observables + http.

[@demiantah3179]

un tutorial taaaan claro, con una voz tan tranquila y buena edicion es genial para gente que esta conociendo angular como yo, te recomendare en mi universidad, por lo pronto me suscribo y te doy like, gracias por tu labor, un abrazo!

[@user-ll3bo4re6b]

Uno de los mejores (por no decir el mejor) video de angular que he visto, muy completo y ordenado. felicitaciones 👍

[@NooneNolimit]

Que buen video, muchas gracias, aprendí mucho, vengo de Spring y me esta gustando un montón Angular

[@chowjorge11]

Tienes el don de la explicación, todo muy claro, muy ordenado, he visto que has parado de subir videos estos ultimos meses, por favor, sigue, sigue creando y expandiendo tu comunidad, aqui hay mucho potencial, muchos exitos

[@irojascorsico]

Gracias por tus comentarios! Lamentablemente estoy con mucho trabajo. En noviembre (no falta mucho) me libero de algunos proyectos y les comparto más material. Abrazo!

[@bryanoropeza8271]

Apoyo el comentario, estamos a la espera de tus próximos videos, Mucho éxito

[@geovannymesa2015]

Que gran explicación, sin afanes, calmada, muy precisa, detallada, que excelente video Bendiciones, saludos desde Bogotá Colombia

[@gonzalomedina9013]

Muy didáctica y precisa la forma de explicar. Realmente es una genialidad este video. Me permitió dar un repaso general de Angular y aprender a crear un Login desde cero. Gracias, me suscribo.

[@HILDERMOSCOTE]

Uno de los mejores vídeos, felicitaciones, explicas muy bien

[@felipemendietaz4947]

Excelente video, lo que más me ha gustado son las buenas prácticas, ya que en cualquier lado se encuentra la lógica de cómo más o menos hacer el login pero tu nos indicas las maneras correctas de escribir el código. Saludos desde Ecuador.

[@AFalken]

Excelente video y gran descubrimiento tu canal. Me encanta la forma de enseñar que posees, que incluso un usuario principiante de Angular como yo sé siente a gusto. Felicitaciones y sigue así! 👏🏼👏🏼👏🏼

[@rodrigoamaffei]

Muy bueno el video! Clarisimo los conceptos! Espero hagas una segunda parte utilizando JWT, cookies, session o localStorage! Muchas gracias

[@joseantonioamayapostigo2542]

bueno pues superado lo de las validaciones en angular ya estamos de vuelta y las validaciones con angular al final son más efectivas

[@joseantonioamayapostigo2542]

hola exelente tutorial espero la segunda parte con ansiedad porque de todos los tutoriales que he visto este es uno de los mas completos y bien explicado que he visto .Gracias por el aporte

[@israelsalinas2211]

Gratamente impresionado de la calidad de este video curso, excelente explicación. Muchas gracias.

[@rubenmontes1745]

La verdad impecable. Me encanta como explicas. Con vos le pierdo el miedo a Angular. Excelente tenés un seguidor más.

[@xxxxx-ky6ts]

Gracias por tan bellas clases, me está sirviendo mucho para mi materia en la ingeniería. Felicidades!!

[@mohtadibakali1557]

Excelente video, muchas gracias por tu contribucion a la comunidad, solo un detalle, las ultimas versiones de angular abogan por un enfoque 'moduless', es decir promueven los stadalone components y el uso de Signals con objeto de en un futuro eliminar el uso de zonejs.

[@irojascorsico]

Exacto!! Este video fue realizado previo a la última versión de Angular (17) que propone eso. Realizaré videos hablando de estos temas... en la medida que tenga tiempo, Dios mediante. Abrazo!

[@jejecs]

ya vi un video tuyo en java y me fue genial. Grande sigue asi y muchas gracias!

[@maximilianogabrielkolbl8040]

Muy buena explicación me encanta como te enseña a entender el código muy práctico todo muchas gracias por tu aporte!!

[@diegolanda3067]

Gracias por la explicación, recién estoy iniciando y lo entendí.

[@sant_go_dev]

Que categoria la de este curso, muy bueno, muy claro y facil de entender!

[@bsanzana]

Gracias por el video! estaba estancado en una prueba técnica y la logre sacar adelante. Puedo comunicarme entre componentes con el behavior subject, sin embargo, al hacer reload o cambiar de url manualmente pierdo las variables que contienen la data de los behavior. Algo mencionaste de perdurar en el tiempo con tokens. Felicitaciones sigue así, muy buen contenido.

[@irojascorsico]

Hola @sanzana5053, lo que expresas es acertado. Los valores de las variables de los behavior subject se pierden al hacer reload. Para resolver, una de las opciones quizás más sencillas es guardar la data en variables del local storage.

[@javierdardon929]

Que pasada de video, que buena explicación!!!!

[@irojascorsico]

Gracias! 😊

[@elvispaicoc.114]

Gran video, y tu forma de explicar muy clara. Gracias por compartir.

[@jzn007x]

@irojascorsico Excelente presentación, la forma de explicar, las diapositivas de como trabajan en conjunto, las implementaciones, es una pieza de arte, gracias por facilitar tu conocimiento, saludos

[@sergioplaza640]

Hola, dejo mi comentario mas que todo para agradecer por tu tiempo y tremenda experiencia con tu conocimiento, me sirvio mucho, todo claro y conciso, gracias. Una consuta: Que me recomiendasm, necesito crear un Login para usuario(que puede añadir productos) y Login Admin(que administra sus negocios o colaboradores) seria mejor crear proyecto por separado o mejor trratar hacer dentro del mismo proyecto todo ? Lo estoy utilizando para mi proyecto de la universidad, ahora vamos por la parte 2 jejej Saludos!!

[@fergnando6160]

Clarisima la explicacion! ojala siga con mas videos de Angular

[@Code-Logan]

Super tu video espero continues este e implementes jwt y amplies lo de observables

[@nahuelrosso9836]

Muy buen video!! Me gustaría que saques la parte 2 para profundizar mas jaajajaj

[@irojascorsico]

Hola @nahuelrosso9836, qué contenidos te gustarían para una segunda parte?

[@user-pf3sq3tt6z]

Excelente video, muy clara tu forma de explicar. Gracias!

[@irojascorsico]

Muchísimas gracias!!

[@henryantoniovargashernande2163]

claro,preciso y muy ordenado la explicacion se aprende con facilidad excelente tutoria

[@albertoulin2927]

De pura casualidad las diapositivas no las compartes?, muy buen video, seguí los cuatro videos!! muchas gracias.

[@ivansarjanovich3769]

Muy buena forma de explicar profe! Gracias por el aporte

[@gratheiler]

Excelente tutorial!!! Ahora necesito en backend!! Con typescript...

[@sechflores3820]

Sos una crack!! muy buen tutorial super explicado todo con documentacion oficial. 😁

[@nyyacat91]

Me he visto miles de videos y este ha sido el mejor que he encontrado hasta ahora, mis felicitaciones Ivana, me gustaría preguntar si vas a hacer la continuación de este video...la base de datos del backend...( o si tienes alguno que pueda seguir a este) por que estoy empezando en este mundo y sería de gran ayuda, muchas gracias!

[@irojascorsico]

Hola! Si puedes mirar el último vídeo que publique donde trabajo el backend con Sprint boot, Sprint security y MySQL. Autenticación basada en Jwt. Próximamente se publica uno donde trabajo la conexión entre front y back. Abrazo

[@ivancalisaya4218]

Parece ser un buen video, lo veré 👍

[@dl9206]

Buen video, muchas gracias profesora 👍🏻.

[@irojascorsico]

Muchas gracias! 😊

[@mohtadibakali1557]

01:03:47 los errores no se gestionan dentro del subscribe, ya que no nos permiten recuperarnos de ellos, para ello hay que usar catchError y usar alguanas de estas estrategias • replace strategy • rethrow strategy • y retry strategy

[@irojascorsico]

Hola @mohtadibakali1557, en el ejemplo dentro del suscribe trabajo con la consola a modo ejemplo.... es dónde deberíamos incluir código que informe al usuario sobre el fallo. Si ves el video un poco más adelante, explico el catchError. Saludos

[@yilsonalexismalambomadriga5376]

excelente, muchas gracias por compartir tus conocimientos..

Excelente su forma detallada de explicar con teoría y practica. ¿A parte de KZbin, donde más puedo encontrar sus cursos?

[@irojascorsico]

Hola @JorgeLMendezJimenez, por el momento sólo he dado cursos para organismos públicos y privados pero es la idea para un futuro. Abrazo!

[@xansiety]

Gracias por este video tan claro y preciso!

[@aldairleonardodiazlopez7171]

Excelente!

[@jvargas9943]

excelente el video, te agradeceria que hagas un tutorial para hacer el registro de usuario a un API rest y con este login logearlo xd.

[@irojascorsico]

Eso será parte del próximo video! Proximamente!

[@crisostomoriverabarrios1593]

Explicación clara, Gracias!

[@nilsonmunoz6949]

Que version de angular uso para este proyecto? Saludos.

[@lolmamon]

Muy buenos videos, excelente canal.

[@irojascorsico]

Gracias! 😊

[@gabrielalejandroorellana5366]

Excelente. Se agradece muchisimo.

[@AFalken]

Hola de nuevo. Al terminar el proyecto surge un error al iniciar sesión. La consola arroja lo siguiente: Backend retornó el código de estado undefined undefined, login.service.ts:32:14, login.component.ts:35 y 26. También arroja esto: Error: Algo falló. Por favor intente nuevamente. login.component.ts:40:18, login.service.ts:34, login.component.ts:35 y 26. Esto corresponde a las validaciones, que al parecer no funcionan. ¿Habrá algún breaking change por una actualización? Incluso con tu mismo repositorio surge el mismo error. Se agradece tu ayuda, por favor.

[@irojascorsico]

Hola! Dos opciones para resolver: 1- revisa la ruta del archivo data.json 2- elimina la implementación del método OnDestroy en los componentes: dashboard y navbar. Este punto se explica en el video para abordar la importancia de desuscribirse. Pero lo ideal es hacerlo en el método onLogout, es decir cuando el usuario cierra sesión. Este contenido no se explica en el video, será explicado en un próximo video. Saludos, Ivana

[@AFalken]

@@irojascorsico gracias por la respuesta, voy a mirar eso. 👏🏼

[@mari.archive]

@@AFalken Pudiste solucionarlo? Me salta el mismo error :/

[@jhairdanielosoriogarzon9830]

exelente gracias al video encontre un error al resivir la api en el servicio

[@alissamilagrossalazargamar9870]

Que bien explicas, me encanta!!!!!!

[@irojascorsico]

Gracias! 😊

[@maurojimenez6191]

un 10 este video. Gracias miles.

[@valerio9851]

acabo de ver todo el video. y la verdad que esta hecho muy bien. Una cosa, en los siguientes videos vamos a ver como puede registrarse un usuario?

[@irojascorsico]

Si, el siguiente incluye registro de usuario. Saludos

[@visioNGT]

sube mas :( enseñas muy bien

[@irojascorsico]

Gracias!!!

[@edilbertopatino1674]

Excelente. Muchas gracias

[@gabrielfernandomamanicatar865]

hola, alguien sabe como cambiar la paleta de color pero dentro de Angular? Solo encuentro tutoriales que usan Bootstrap o Angular, pero no ambos a la vez y no puedo hacer los cambios.

[@veritocapito]

Muy buena explicacion! Cuando es la proxima clase para integrarlo al backend? Muchas gracias.

[@irojascorsico]

Hola Verónica. Gracias! Respecto a la segunda parte (login #backend con spring boot) estoy trabajando en eso, ni bien lo tenga les comparto. Abrazo!

[@martinmaine]

@@irojascorsico hola! muy buen video! Ya está la parte del backend para el login?

[@irojascorsico]

@@martinmaine Hola Martín, te comento que estoy trabando en una serie de videos sobre Web Security 6.0. Resolví trabajarlo en varios videos porque es necesario explicar en primer lugar los componentes involucrados en web security para luego, entender y pasar a los diferentes métodos de autenticación (jwt es uno de ellos). En este momento estoy trabajando en el guión. Sin embargo, si bien esta funcionalidad es requerida para cualquier proyecto, si estás cursando Arg. Programa no es obligatoria. Te dejo un video que explica cómo enteder un api rest implementando un endpoint para el login sin Web Security: kzbin.info/www/bejne/j6Cld4eJgLOlepI. Saludos! Ivana

[@joseantonioamayapostigo2542]

buenas tardes muy buen tutorial pero creo que falta algo a la hora de validar el componente con las clases en el minuto 39 a 40 donde hay que poner esas clases en el HTML?

[@irojascorsico]

Hola José, las clases de estado sólo tienes que configurarlas en el archivo styles.css o bien en los archivos de estilo del componente en cuestión. No hace falta especificar dichas clases en los input controls dado que Angular lo hace por tí. Abrazo!

[@Neo-mt4iu]

Y como se haría una página de registro?

[@jalberto6322]

Geniales tus videos Ivana! Tengo una par de dudas secillas, a ver si pudieras ayudarme: 1. ¿ El ngOnInit( ) de cada componente se lanza cuando se muestra por pantalla? si voy hacia otro componente, por ejemplo de "Dashboard" a "Formulario de contacto" y vuelvo despues al "Dashboard" se vuelve a actualizar este ngOnInit( ) entiendo no? 2. Por tanto este Behavior Subject podría utilizarlo en parte como un almecenamiento temporal entre componentes con los datos del usuario/token, como "sesión" para una sola vez, donde todos los componentes pudieran durante esta unica sesion acceder al token y a los datos del usuario (?) Estoy haciendo un proyecto para clase y decidí utilizar Angular para aprenderlo, pero no es necesario que sea tan complejo como para utilizar sesiones. Con Behavior Subject me deberia de valer no? Muchisimas gracias ^^

[@irojascorsico]

Hola! Respondiendo a tus consultas: 1- El evento ngOnInit, se ejecuta después de que el componente se ha creado. Y si, se lanza cada vez que se crea la instancia del componente. 2- Puedes utilizar Behavior Subject como almacenamiento temporal pero recuerda que los datos se almacenan en la memoria del navegador por lo que si, refrescas la página se perderán. Para resolver puedes utilizar el almacenamiento local del navedador (localStorage), la sesión (sessionStorage) o bien las cookies. También puedes utilizar el operador shareReplay de RxJs para almacenar en la caché los datos de tu aplicación. (esto lo explicaré en el siguiente video - integración frontend + backend) Saludos, Ivana

[@kimtechsoldier2259]

1:25:08 Por favor la segunda parte del video :)

[@pablocavallo4343]

Hola Ivana excelente explicacion cual es el video que le sigue a este ??

[@irojascorsico]

Hola @pablocavallo4343, como estás? Puedes continuar con el backend. Te sugiero ir a ver en el siguiente orden: 1- ¿Cómo crear un API Rest con Spring Boot: kzbin.info/www/bejne/rYWQmXybjt6reMk 2- Luego, ¿Como crear el login? Spring Security 6 + Spring Boot 3: kzbin.info/www/bejne/pKjUgox5gpmMipo y por último integar frontend con backend: kzbin.info/www/bejne/q3zEdaWln8aWp9k Abrazo!

[@rodriguezgilanghelofabrizi8816]

Hola como estan una consulta alguno tuvo un problema la primera vez que le dieron al boton de login, ya que me sale objectunsuscriber siendo la primera vez y cuando recargo la página y vuelvo a introducir datos esta vez si entra de manera correcta gracias

[@elvisjosepavonzeas819]

Puede hacerlo con php como BACK-END

[@yanasulucaroni7789]

Buenas, una consulta, con la última CLI de angular funciona de la misma manera? Porque para empezar, una vez ejecutado el comando "ng new" cuando busqué el archivo app.module.ts no existe, quizás puede ser por eso? Gracias!

[@irojascorsico]

Exactamente, la versión 17 de Angular introduce los llamados "componentes independientes" o "standalone components". Un standalone components es un componente que se puede crear y utilizar sin un módulo padre que le brinde el contexto de compilación. Sin embargo, es importante agregar que por el momento, es posible mantener los módulos y trabajar como veníamos haciendo hasta ahora.

[@yanasulucaroni7789]

excelente, muchas gracias por la información!@@irojascorsico

[@santiagobeltranramirez]

Hola. Que versión de Angular usas?

[@irojascorsico]

En el archivo package.json siempre puedes ver las versiones de angular y sus dependencias utilizadas en el proyecto. En este caso, estuve trabajando con la versión 14.1.0 pero luego, actualicé a la versión 16 y por el momento no hay nada deprecated. Abrazo!

[@pabloperello8801]

De esta forma al refrescar la vista se pierden los datos porque se destruyen los componentes, lo logico seria guardar el estado en localstorage y luego levantarlo y usar el next para volver a tener siempre disponible el dato no?, muy buen video, gracias.

[@irojascorsico]

Así es Pablo, hay que trabajar con el session storage o el local storage. En el próximo video que integra la conexión con un backend y la autenticación basada en jwt se hablará sobre esto. Abrazo!

[@yeimeralbertomarquezrojas5422]

Buenos días, muy buen video profesora Ivanna. Mi consulta, es si los datos de correo y clave en la base de datos vienen de la entidad "persona" y no "user", se sustituye donde dice "user" por "persona". O tendría que haberse creado una entidad nueva en el BackEnd de User. Gracias. Supongo que en 1:08:49 allí se sustituye la dirección de la base de datos por la url del BackEnd.

[@irojascorsico]

Hola Yeimer, en relación a tu primer pregunta, puedes utilizar la entidad persona. Respecto al momento 1:08:49 del video reemplazaríamos por el endpoint correspondiente para manipular o acceder a los datos de la base de datos. Abrazo! Ivana

[@yehimygallego6442]

Ivana, realice el ejercicio pero no me funciona el cerrar sesión en un proyecto standalone =true, cómo puedo solucionarlo. Gracias. Excelente explicación

[@irojascorsico]

Hola @yehimygallego6442, qué error puedes observar? Me brindas más info para así poder ayudarte? Abrazo

[@oswaldoortizmartinez2309]

Hola, estoy realizando un proyecto con ayuda de tu tutorial pero no me respeta los css de bootstrap alguna ida porque? estoy con angular 15

[@irojascorsico]

Hola @oswaldoortizmartinez2309! Para trabajar con bootstrap debes: 1- Instalar bootstrap corriendo el comando npm install 2- Modificar el archivo angular.json para referir el archivo de estilos y el de javascript. Te dejo un link con un ej. de configuración github.com/irojascorsico/jwt-auth-login/blob/main/frontend/angular-login/angular.json

[@valerio9851]

video muy bien hecho, tienes el video para el back end?

[@irojascorsico]

Está tarde se estrena el back con spring boot y autenticación basada en jwt. Próximo video va la integración con Angular.

[@JurgenMolina]

como hago para que no se vea el header y el footer si estoy en el login

[@irojascorsico]

Hola @JurgenMolina, debes llevar todo lo que tienes en el app.component.ts a otro componente (ej. home.component.ts) y especificar sólo la etiqueta en app.component.ts. Luego, configura las rutas. Una para el login y otra para el home. Espero haberme explicado. Saludos!

[@danielhuaman274]

Hola Ivana, gracias por el aporte. El tema del navbar del bootstrap no me funciona el button navbar-toggler, no muestra las opciones, he probado con tu codigo y con este tmb: "styles": [ "src/styles.css", "node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" ] He probado con el codigo de la docu del bootstrap tmb y Tengo la version 16 del angular . Agradeceria su apoyo. Saludos

[@irojascorsico]

Intenta con "./node_modules..." tanto para el archivo de estilos como para el de javascript

[@joseantonioamayapostigo2542]

muy buenos dias la parte de p dentro de form cuando la ruta no es correcta en el service no me muestra el error-{{loginError}} , pero por lo demás todo bien al estaré haciendo mal

[@irojascorsico]

Revisa haber definido la variable en el archivo ts.

[@manuelignacioquiroga5174]

Hola Ivana, sos cordoba?

[@irojascorsico]

Que buena pregunta @manuelignacioquiroga5174! En realidad es un lío, soy de San Luis Mercedes pero viví muchos años en Córdoba y actualmente vivo en Chubut. Sin enmbargo trabajo para Cba (entre otros) y sí!! se me pega muy rápido. Igual me encanta!! Abrazo!

[@javierinsaurralde813]

pregunta, se puede usar angular con java? 🤔

[@irojascorsico]

Si claro, el backend lo puedes realizar en múltiples lenguajes. Abrazo!

[@felixsebastianolimaquinter631]

hola profe, consulta no seria un método post en el login en ves de get para mandarle a la api rest?

[@irojascorsico]

Hola Felix, si claro debe utilizarse el método Post. Aquí, a modo de ejemplo, configuramos que devuelva siempre lo mismo. El objeto de este video en particular es ver cómo trabajan los componentes, servicios y observables desde la perspectiva de Angular. En un próximo video explicaré la conexión con backend y hablaré específicamente de las peticiones http y todo lo que hay que tener en cuenta. Abrazo!

[@felixsebastianolimaquinter631]

@@irojascorsico gracias profe

[@nahuelpardo8766]

Hola profe, como implemento el logout?

[@irojascorsico]

Hola Nahuel, para implementar el logout debes trabajar de la misma manera que con el login. Es decir, debes trabajar con el servicio y el Behavior Subject. La diferencia ahora es que tienes que cambiar el valor del atributo currentUserLoginOn a falso. Saludos, Ivana

[@poesero]

hola estaba siguiendo el video para un TPO de la facu y tengo que usar @ng-bootstrap/ng-bootstrap pero me tira este error: Error: src/app/app.module.ts:14:46 - error NG6002: 'NgbModal' does not appear to be an NgModule class. 14 imports: [BrowserModule, AppRoutingModule, NgbModal, NgbModule], ~~~~~~~~ node_modules/@ng-bootstrap/ng-bootstrap/modal/modal.d.ts:12:22 12 export declare class NgbModal { ~~~~~~~~ This likely means that the library (@ng-bootstrap/ng-bootstrap) which declares NgbModal is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy. Sí alguien sabe como arreglarlo lo agradezco.

[@irojascorsico]

Hola! Puede que el problema esté en la versión de bootstrap que estás trabajando. Si no me equipoco bootstrap comenzó a ser compatible con Ivy a partír de la versión 5. Intenta actualizar a la última versión e intenta nuevamente. Saludos, Ivana