Estoy aprendiendo angular, y cuando veo tus videos son realmente pedagógicos, explicas el porque de las cosas, tomando en cuenta tu experiencia, en muchos casos, cuando se aprende por cuenta propia es importante saber cuando y porque son necesarias algunas implementaciones y usted se toma el tiempo para aclarar eso. Felicidades...!
Lo genial de tus explicaciones es que das un trasfondo y ademas el porque de la buena practica lo cual es super importante para que recuerdes el porque usarlo y hacerlo tambien
Si a alguien le sirve, tenia un problema y es que tenia el provider en cada componente por lo que es como tener 2 observers, no encontraba el problema hasta que mencionó lo del core module y entendí que ese era el problema. Gracias!
gracias maestro, la explicación de los observables mas precisa y sencilla que e visto y eso que he investigado bastante, lo haces ver fácil un tema que es un poco mas profundo en Angular
@@GentlemanProgramming Hola Alan, una consulta: Si de un componente A (en donde estoy enviando un objeto con el servicio A, y en el servicio el objeto estuvo inicializado en null) y me traslado a un componente B, entonces ahí en el init() me suscribo al servicio y recupero el objeto, hasta ahí todo genial. El problema es que estando en el componente B y por alguna razón refresco la pantalla, el servicio se vuelve a crear nuevamente, y el objeto se pone en null (pq asi esta declarado en su parámetro de inicio). ¿Cómo haría para que el servicio no se vuelva a construir después del refresh que le hago a la página?, ya que quiero recuperar ese objeto con el servicio y no quiero usar localStorage o sessionStorage.
@@mpalaciost ahí está el tema, así es la cosa jajaja Las cosas se destruyen al refrescar la pagina no hay otra forma. Deberías volver a pedir la información, ya que igualmente es una buena práctica para que no se pueda extraer info de la app de una manera fácil. No queda otra que re popular Si realmente lo quieres así, tienes que utilizar alguna librería como redux-persist o el local storage.
Muy bueno ya lo habia aprendido hace tiempo para atrás pero aprendí algo nuevo al quitar la palabra private en el constructor muy bueno no me la sabia... Igualmente si se necesita modificar la data por x o y motivo en vez de usar el pipe async en el htmo, se pueden susbcribir en el .ts y manejar la data allí. Pero hay que hacer un unsusbcribe o complete del observer para evitar fugas de memoria... Buen Video
Si pero hay una mejor manera ! Un pipe async responde siempre a una variable asincrónica, si tienes una variable igualada a un observable y a este le haces un map para modificar sus datos, el pipe va a mostrar el dato modificado. No necesitas hacer subscribe ! :D
Alan!. Cómo siempre. Muchas gracias. Justo he tenido esa problemática. Por ejemplo con los forms. Siempre con esa dependencia con el componente o la logica para guardar y otro para editar pero usando el mismo form. Y sin querer llegar a utilizar un state manager tan robusto como NgRx.
Pasa amigo Daniel... pasa... pero todo viene con la experiencia :) yo en mi caso trato de hacer soluciones propias y de utilizar siempre lo mínimo y necesario
buenas buenas, guaperas. Amigo, amo tu canal y me ha sacado muchas veces de apuro, tengo un comentario: En el minuto 10:17 usas un "constructor" para hacer la inyección de dependencias, no está mal, depende que versión de angular uses está cool, pero directamente puedes usar un "Inject" para hacer una inyección de dependencias exactamente donde las usas y no de manera global en el componente. Ese "constructor(prviate sharingService: sharingService)" bien podría ser reemplazado por un private sharingService = inject(sharingService); Esa variable puede emplearse en el scope completo de tu componente o bien, puedes usarlo puntualmente dentro de algún método. Esto viene bien, ya que en aplicaciones muy grandes, tendrías un "constructor" super cargado con un montón de inyecciones de dependencias que al final pueden resultar en un antipatrón. Saludos cordiales! que estés de maravilla
Hola Gentleman, primero que todo quiero darte las gracias por compartir este conocimiento de una manera tan clara y precisa y segundo tengo una dudad esto también lo podriamos reemplazar utilizando el praton redux con NgRx o son situaciones diferentes
Hola, dejeme decirle que es primer vídeo suyo que veo y me gustó bastante, se nota mucho el conocimiento y que sabe el por qué de cada cosa, me ha sacado de varias dudas que me rondaban la cabeza desde hace tiempo, por ejemplo: para qué se ponía asObservable( ), me daba cuenta de que no era estrictamente necesario pero no sabía por qué. También el por qué usar get y set en vez de métodos normales. Uno de los más importantes la diferencia real entre BehaviourSubject y Subject, etc. Me gustaría hacerle una petición ya que explica muy bien. Quisiera que hiciera un vídeo explicando bien el concepto de usar el .pipe al momento de realizar una suscripción y los operadores más usados de RXJS (tap, map, filter, of, from, etc.). Edit: ¡Ya veo que tiene el vídeo en cuestión! (ya me pongo a verlo). Saludos! excelente contenido.
@@GentlemanProgramming Gracias! Lo vi ayer y sí, excelente, me resolvió también otra gran duda que siempre había tenido y aún así usaba los pipes y operadores RXJS, que es lo que no debería pasar. Usar métodos y características del framework como de forma mecánica sin saber realmente qué es lo que estoy implementando. Una nota curiosa es que en entrevistas de trabajo, preguntan más fácil conceptos como Redux y muchas veces se saltan RXJS, pues yo opino que con sólidos conocimientos de RXJS el concepto de Redux sale fácil. Muy buenos sus vídeos! PD: ¿No ha considerado unirse a plataformas como Platzi por ejemplo? creo que ud es muy buen instructor.
Hola Alan! Gracias por tus explicaciones eres un crack! Ahora por la existencia de los Standalone simplemente importamos el servicio en los componentes standalone ?
Podria almancenar el token JWT en un BehaviorSubject para no tener que guardarlo en localsorage ? segun entendi este BehaviorSubject puede persistir un valor y acceder a el cuando se necesite, no se si lo podria usar para este cometido.
No porque cada vez que navegues a otra tab, recargues la pantalla o lo que sea tendrías que volver a loguearte, el behaviorSubject solo tiene un cache ligado a la sesion.
gracias por tu video era la explicación que necesitaba, te consulto cuando usas el set en el component, es necesario hacerlo desde ahi o podría también utilizar mi set en mi component lazy donde ya había utilizado el get?
En mi caso lo hago generalmente en otro componente, si lo haces en el mismo asegúrate de que no lo hagas dentro del mismo subscribe porque sino se te haría un ciclo infinito
Hola gentleman, estoy tratando de hacer un servicio donde me traiga un json en ingles o espaniol dependiendo si en el header se cambia de idioma pero cuando cambio el idioma en el header llega hasta el servicio el cambio pero no se actualiza en los demas componentes desde donde toman los datos. Se que con esto del behaviour Subject lo puedo hacer pero no le doy a como.
Hola amigo, una consulta, estoy usando el BehaviorSubject, al usarlo entre componentes dentro de un mismo módulo va todo bien, pero cuando quiero usarlo entre componentes de distintos módulos se pierde la información, ¿Cómo debo hacerlo entre módulos?
Hola ! eso es porque tu behaviorSubject tiene que estar declarado en un módulo que comprenda a ambos módulos hijos qdonde quieres compartirlo, sino no se puede. Fijate como es la injección de dependencias entre módulos en Angular. Espero haberte ayudado !
Hola Andrea ! Para traer datos de la base de datos tienes que utilizar el módulo http module y utilizar el http client para hacer la llamada a los endpoints que brinda el backend. Esto sería más que nada para compartir información dentro de la aplicación
@@GentlemanProgramming si lo intento pero sigue sin mostrarme lo que le pido que traiga...y no encuentro el error en el código, usé los mismos métodos en el frontend y en backend pero aún así no logro q se conecten y estoy utilizando httpClient,pasándole la URL de la base de datos y en cada método tengo declarado el path que debe seguir....😣
@@andreaviola640 es que la base de datos no se conecta con el front end sino con el backend. El backend tiene que crear una Api con urls, cada url determina una acción posible sobre la base de datos. Creo que te está faltando hacer el back
@@GentlemanProgramming el back lo tengo hecho con java en Netbeans,con la base de datos se conecta,pero cuando llamo a los datos en el frontend usando métodos con la misma funcionalidad que los q declaré en el back no me trae nada...
@@andreaviola640 hmmm pero dan status 200 y no tiene resultado ? O dan error ? Puede ser que en el back no se estén devolviendo las cosas en el body. Pero parecería que el problema está por ahí. En el front si ni si ejecuta la lógica no te olvides de subscribirte a las llamadas !
Hola Alan! Como estas ! Estoy estudiando los signals y queria hacerte una consulta. Como podriamos escribir esta forma de compartir informacion pero con signals ? Se puede? Saludos!
Hola, tengo una duda. ¿Esto serviría como el localStorage para guardar información del usuario en su propio navegador?, no quiero guardar información y luego este sea visto por todos los conectados en la pagina web o que cada vez que un usuario ingrese actualize para todos los conectados anteriormente. Saludos Cordiales.
Buenas ! tienes que guardarlo en el local storage, aunque no la verdad no lo recomiendo ya que puede causar problemas de seguridad. Algunos tips sobre cúando y cómo usarlo: 1- NUNCA guardes información sensible en el local storage 2- Único caso donde usarlo es cuando sabes 100% que la información no cambia o esta solo puede ser accedida por un único usuario 3- En sistemas donde multiples usuarios pueden accionar sobre la información y accederla al mismo tiempo ya no sirve practicamente porque siempre estaría desactualizada.
Grande Alan, me sirvió mucho saber estos conceptos, bro me resultan unas dudas, se hace de la misma forma con data que viene del back?. Es que no se si estoy haciendo bien, resulta que tengo 2 componentes y en ambos llamo el servicio el cual tiene el endpoint con httpClient etc, me funciona todo bien. La duda es que en ambos componentes me debo suscribir a fuerza?, o se puede hacer con este método que indicas?. La otra duda es que en cierto componente necesito solo 2 datos de la entidad usuario, pero no body de respuesta viene con muchos datos de ese usuario, en ese caso podría hacer un pipe con un map para obtener sólo esos 2 datos?, eso sería más óptimo?, o sería mejor hacer un endpoint que me devuelva solo estos 2 datos (O ya es exagerar?), es que ahora mismo ando haciendo muchas peticiones en varios componentes que necesitan esa misma entidad, pero creo que lo que explicas en el video es el camino. Ando apenas aprendiendo bien estos conceptos entonces si ando un poco enredado. Y por último siempre que sea una petición que viene del backend toca suscribirse o se puede como decías con el async?, y en caso de suscribirse a la petición siempre toca pasar la suscripción por el ngDestroy() ?. Disculpa lo extenso, pero la verdad ando muy enredado 😅. Gracias bro y que Dios te siga bendiciendo con ese don de la enseñanza. 💪🏻
Te hago una consulta, este problema no los tienen los array, no? Porque hice el mismo ejemplo de usar un servicio entre dos componentes, y se actualizan.. Quizás sea por el push()?
No deberían, trata de que el array esté definido en el servicio y tengas dos métodos, uno te devuelve el array y otro le mete valores. Ahora consume el array desde un complejo te por uno de los métodos y ahora envía cambios al array desde otro que sea hermano del mismo
@@GentlemanProgramming gracias por la respuesta. Justo hoy a la tarde se me ocurrió preguntarle a ChatGPT esta duda ya que estuve varias varias horas buscando porqué tenía este comportamiento diferente los array y las variables, y esto fue lo que me respondió: Las variables en un servicio no se reflejan automaticamente en los componentes que utilizan porque el componente obtiene una copia de la varibale. En cambio, cuando se modifica un array, esto se ve reflejado en los componentes que lo están utilizando porque el componente está utilizando la misma referencia del array que se encuentra en el servicio. Espero que sirva de aporte.
@@gabrieltrossero8290 ah una cosa, puedes acceder a los datos sin problemas, el problema es que no vas a saber cuando se ha realizado el cambio y ahí es cuando los observables nos dan una mano
Hola Buen dia llegue a este video tratando de entender que son los observables, me ha sido util pero tambien me surgieron interrogantes que paso a detallar. Porque no usas el metodo suscribe en el componente, que tan necesario es hacerlo, cuando si y cuando no?. Muchas gracias por el video y agradeceria la aclaracion.
Hola ! Porque si te subscribes tienes que de subscribirte ! Siempre en el ondestroy, esto hace que sea un paso que puede que te olvides y puede generar los llamados memory leaks. El pipe async soluciona esto al hacerlo de manera automática. Te recomiendo mi vídeo de memory leaks aquí mismo en el canal.
@@GentlemanProgramming Gracias por la respuesta, lo tendre en cuenta. Recien estoy empezando con angular y no lo vimos tan a fondo, en mi caso tengo un boton cuyo texto y color cambia al hacerle click. Se pasa el click desde el template al componente que llama al servicio y se suscribe al observable (que actualiza un booleano a true o false ) que luego usamos para actualizar el boton. Estaba tratando de hacerlo de otro modo sin suscribe pero no logre nada.
@@augustocontreras692 los observables sólo Sirven para compartir información entre diferentes componentes. Si solamente quieres cambiar el color de un botón de acuerdo a una propiedad lo que tienes que hacer es crear una propiedad dentro del componente que luego aplicaras en el templete dentro de un ngClass. Si la variable tiene un valor le aplicas una clase sino otra. Y el valor de la misma lo cambias con el click. Los observables no son una solución para todo, se utilizan para casos específicos en los cuales quiere compartir información entre componentes que son distintos y estos van a reacción de manera diferente acorde al valor que reciban. Para más de esto fíjate que tengo un vídeo de Programación reactiva :)
@@GentlemanProgramming Tambien hay un template con un formulario que usa ese booleano en una propiedad ngIf para mostrar u ocultar el formulario. Aparentemente asi el componente del boton como el del formulario pueden enterarse cuando se hace click en ese boton 'agregar tarea'. Gracias por la sugerencia, voy a mirar mas de tus videos seguramente encontrare mas cosas sobre Angular.
lo hice igual a como estaba echo y no funciono(solo la primera ves carga en cuando entra a NgOnInit el valorpor defecto, luego de eso ya no escucha los cambios), puede ser porque uno de mis 2 componentes forma parte de otro componente dentro de ng - content?(estoy utilizando un componente de modal popup que crea un modal con ng content), que podría hacer para que si los escuche a los cambios.
Seleccionar ubicación del contenedor
Seleccione la ubicación que desee
como se puede ver app-mapa-seleccion esta dentro de los tags de y luego esta en la estructura del form. lo que estoy intentando hacer es seleccionar una localidad de un combo de selección y luego pintar en un mapa de leaflet mediante un geojson, pero el observavle no esta funcionando y pienso que es por eso de ng content. Buen video, explicas muy bien, saludos
Hola ! Podrías enviar el código de ts? También te invito al discord de la comunidad, por ahí es más fácil hacer la consulta por ahí. Fíjate que sea un behaviourSubject por si uno se subscribe antes que el otro. También fíjate que sea la misma instancia del servicio, trata de que la declaración del mismo se haga en el módulo que declara a los dos componentes.
@@GentlemanProgramming gracias, estoy realizando mi tesis final de Analista Programador y ahora estaba trancado con este tema, la instancia puede ser distinta, la cree en cada componente
Ahí está el asunto verdad? La solución son los local storage ! Hay que tener un balance muy justo entre que información almacenar, trata de que sea lo menos posible y nada con carácter sensible.
@@danabaiardi5452hola ! Generalmente es recomendable en el state de la app, y que cada vez que se recargue se vuelva a buscar la información. Si necesitas que se guarda aún en recarga, debes de ofuscar la información aplicando algún algoritmo. Si es información que tiene otro tipo de seguridad (como lo es un token que luego se refresca y se válida en el back) no pasa nada :)
aunque no lo creas... es MUY normal ! generalmente nos vamos a utilizar frameworks y librerias sin aprender las bases de las mismas. Así que no te sientas mal que es lo más común del mundo jajaja :D
Buen video, una consulta, si en mi aplicación cargo catálogos preseleccionados dependiendo el usuario, para llenar estos catálogos hacer lo dle video me serviría, es decir si al loguearme trago la data de los catálogos y la emito, podre usar esa data en diferentes módulos, seria buena práctica o por cada componentes donde use los catálogos hacer la petición? Eso no se me hace viable :c
Si se usa en todos lados, dale nomas desde el mínimo padre de ellos. Eso quiere decir, que si tienes 2 modulos, y dentro de uno de ellos usas info repetida, solo haz la peticion en ese módulo en particular y no en el padre de los dos primeros
Ngrx puede ser demasiado para algo súper simple como compartir información entre componentes, se utiliza para almacenar entidades que pueden ser reutilizadas en TODA la app, no solo en una vista. También para los que recién empiezan puede ser bastante tedioso de aprender, desde el uso de los reducers y las acciones hasta la implementación de efectos.
Hola, excelente video. Intendo hacer lo mismo pero me sale linea roja y el error dice "cannot assign to '__nombreVariable__ ' because it is a read-only property, en mi AppModule.ts cuando intento asignar un objeto como lo hiciste al final del video para cambiar el estado del behavios subject. Si alguien pudiera ayudarme, gracias.
Excelente explicación, pero una duda :), si quiero suscribirme a ese Behavior por ejemplo en otro servicio o en un guard para obtener un dato del usuario ¿es un problema de rendimiento? ¿tengo que desuscribirme?, muchas gracias por tus excelentes aportes
Hola ! Es mucho mejor, si quieres el dato de un user para un momento en específico (que es lo que generalmente pasa en un guard o un servicio), solo te interesa el valor contenido dentro del behavior para ese momento en particular. Para ello puedes usar “.value” para obtener el valor sin subscribirse, eso te devolverá el último elemento que haya pasado por el behavior. Recuerda que esto es algo propio de los BehaviorSubjects gracias a su buffer interno que almacena siempre el último valor enviado. Espero haberte ayudado !!
Me sirvió demasiado! pero tengo una pequeña duda, cómo se puede hacer para que el valor que se muestra (por ejemplo "la información cambio") no se cambie, ya que si refresco la página, de nuevo dice "Gentleman Programming"
@@samuelmorales2919 Muchas gracias por esooo, me pone super contento de tener gente que espera mis videos :) Cuanto más pueda ayudar, más feliz soy !!!
Quizá mi comentario se pierda, pero no me quedo claro de que forma se entera el componente que la información ya esta servida, en el caso de hacer una solicitud HTTP
@@minitoy1070 si es el mismo componente por el uso de promesas y entre componentes distintos por el uso de observable ! El observable es el canal de comunicación y luego cada componente se pone a escuchar qué pasa por el mismo, reaccionando a la información que pase por él.
Estoy aprendiendo angular, y cuando veo tus videos son realmente pedagógicos, explicas el porque de las cosas, tomando en cuenta tu experiencia, en muchos casos, cuando se aprende por cuenta propia es importante saber cuando y porque son necesarias algunas implementaciones y usted se toma el tiempo para aclarar eso. Felicidades...!
11:20 - Mostrar la información del Observable en el template html. Usando el pipe "async"
Lo genial de tus explicaciones es que das un trasfondo y ademas el porque de la buena practica lo cual es super importante para que recuerdes el porque usarlo y hacerlo tambien
Muchas gracias de corazón Juan por tu mensaje!!! ❤️❤️
Muy bien explicado, ya lo habia estudiado como tres veces... pero como que algo no me quedaba claro... hasta que vi tu video..
vi un viaje de videos y perdido vi el tuyo y tines talento para explicar felicitaciones
Excelente explicación, muchas gracias. Saludos desde Medellín-Colombia (Y)
Muchisimas gracias Mateo !!
que capo que sos compartes informacion real que se usa en el dia a dia en el trabajo
Gracias miles Abraham ! 🥰🥰 eeeesa es la idea, explicar no solo a nivel conocimiento sino también en experiencia
Muy buen video, estaba trabadisimo tratando de solucionar un problema que tengo de una forma elegante y este video me dio la vida. Muchas gracias!
De nada Dergon !!! Espero que te haya quedado beautiful ese code !!
Soy nuevo en el tema de angular, esto es genial. Lo mejor es conocimiento uintermedio que puedo empezar a aplicar. Estoy maravillado. Muchas gracias.
8:19 - Enchulando los métodos (buenas prácticas) utilizando "get" y "set" en los métodos del sharingService
Que buen video por dios, 16 minutos explicando lo justo y con ejemplos, objetivo todo, genial me encanto
Muchas gracias Josue !!!
Si a alguien le sirve, tenia un problema y es que tenia el provider en cada componente por lo que es como tener 2 observers, no encontraba el problema hasta que mencionó lo del core module y entendí que ese era el problema. Gracias!
gracias maestro, la explicación de los observables mas precisa y sencilla que e visto y eso que he investigado bastante, lo haces ver fácil un tema que es un poco mas profundo en Angular
Mejor explicado imposible, corto y conciso
07:02 - Método para devolver un Observable sin permiso para emitir un valor a ese observable. Sólo escuchar.
Descomunal la explicación, impecable y super clara. Ya mismo me suscribo a este canal!
Excelente video, lo hiciste ver muy facil. saludos
Siempre vuelvo a ver este video del buen Alan cuando aun tenia el mustacho! para recordar la sintaxis del behavior subject
Ya volvió ! Como tú a ver este content, gracias por el apoyo !
Genial, muy bien explicado, gracias por esos 16 minutos tan productivos, porque hay tanto en internet y tan poco como estos videos.
Genial la explicación!!!!.. Gracias por compartir tu conocimiento, un abrazo desde Perú.
Abrazos desde Españaaaa !! 🔥🔥🔥🔥
@@GentlemanProgramming Hola Alan, una consulta: Si de un componente A (en donde estoy enviando un objeto con el servicio A, y en el servicio el objeto estuvo inicializado en null) y me traslado a un componente B, entonces ahí en el init() me suscribo al servicio y recupero el objeto, hasta ahí todo genial. El problema es que estando en el componente B y por alguna razón refresco la pantalla, el servicio se vuelve a crear nuevamente, y el objeto se pone en null (pq asi esta declarado en su parámetro de inicio). ¿Cómo haría para que el servicio no se vuelva a construir después del refresh que le hago a la página?, ya que quiero recuperar ese objeto con el servicio y no quiero usar localStorage o sessionStorage.
@@mpalaciost ahí está el tema, así es la cosa jajaja
Las cosas se destruyen al refrescar la pagina no hay otra forma.
Deberías volver a pedir la información, ya que igualmente es una buena práctica para que no se pueda extraer info de la app de una manera fácil.
No queda otra que re popular
Si realmente lo quieres así, tienes que utilizar alguna librería como redux-persist o el local storage.
@@GentlemanProgramming ok Alan, gracias por darte un tiempo en responderme. Un abrazo!!!
Me sirvió de mucho tu video, por que con eso pude construir un servicio para validar la conexión a internet de mi aplicación, te agradezco.
Que bueno Carlos !!! Muy contento que te haya servido, de eso se trata
Excelente como siempre Mister, súper útil. A la espera de más videos cortitos
Muchas gracias Santiago !!
Muy bueno ya lo habia aprendido hace tiempo para atrás pero aprendí algo nuevo al quitar la palabra private en el constructor muy bueno no me la sabia... Igualmente si se necesita modificar la data por x o y motivo en vez de usar el pipe async en el htmo, se pueden susbcribir en el .ts y manejar la data allí. Pero hay que hacer un unsusbcribe o complete del observer para evitar fugas de memoria...
Buen Video
Si pero hay una mejor manera ! Un pipe async responde siempre a una variable asincrónica, si tienes una variable igualada a un observable y a este le haces un map para modificar sus datos, el pipe va a mostrar el dato modificado. No necesitas hacer subscribe ! :D
@@GentlemanProgramming También es valido muy bueno...
Excelente aporte de hacer el subscribe, gracias.
Me ha encantado el video, 16 minutos invaluables.
Gracias.
Gracias miles Carlos !!!
Gracias por este video, me ayudó un montón a resolver un problema importante
Alan!. Cómo siempre. Muchas gracias. Justo he tenido esa problemática. Por ejemplo con los forms. Siempre con esa dependencia con el componente o la logica para guardar y otro para editar pero usando el mismo form. Y sin querer llegar a utilizar un state manager tan robusto como NgRx.
Pasa amigo Daniel... pasa... pero todo viene con la experiencia :) yo en mi caso trato de hacer soluciones propias y de utilizar siempre lo mínimo y necesario
@@GentlemanProgramming Gracias por tu dedicación con nosotros los nuevos 💪
Sinceramente no había usado esta forma de pasar estado en la aplicación, siempre usaba inputs y outputs, me pareció excelente la explicación :)
Muchas gracias Carlos !! como siempre muy contento de que seas un Gentleman Programmer !!
buenas buenas, guaperas.
Amigo, amo tu canal y me ha sacado muchas veces de apuro, tengo un comentario:
En el minuto 10:17 usas un "constructor" para hacer la inyección de dependencias, no está mal, depende que versión de angular uses está cool, pero directamente puedes usar un "Inject" para hacer una inyección de dependencias exactamente donde las usas y no de manera global en el componente.
Ese "constructor(prviate sharingService: sharingService)" bien podría ser reemplazado por un
private sharingService = inject(sharingService);
Esa variable puede emplearse en el scope completo de tu componente o bien, puedes usarlo puntualmente dentro de algún método.
Esto viene bien, ya que en aplicaciones muy grandes, tendrías un "constructor" super cargado con un montón de inyecciones de dependencias que al final pueden resultar en un antipatrón.
Saludos cordiales! que estés de maravilla
Gracias crack !!!! Si si es que esto es de hace unos años ya jajaja todavía no estaba eso :) en nuestro nuevo curso de angular está ;)
Me sirvió. Muchas gracias.
Muchas gracias, casi ningún ejemplo explica como utilizar los datos de los observables en las vistas html, buen aporte!
Muchas gracias a tí por el comment ! espero que disfrutes de los otros videos también :D
Excelente explicación como siempre. Gracias mister
De nada Manu 🥰
el CAMILO de la programación!!! bien ahi
Excelente. Como siempre!
Gracias Dieguito queridoooo cualquier cosa me dices por la comunidad :)
Hola Gentleman, primero que todo quiero darte las gracias por compartir este conocimiento de una manera tan clara y precisa y segundo tengo una dudad esto también lo podriamos reemplazar utilizando el praton redux con NgRx o son situaciones diferentes
Muy buena la explicación, gracias!
De nada Stefanoooo
Pasara el tiempo y siempre me doy una vuelta por aca para dar una repasada ante cualquier bloqueante que tengo jajajaja.
Buen video padrino
Hola, dejeme decirle que es primer vídeo suyo que veo y me gustó bastante, se nota mucho el conocimiento y que sabe el por qué de cada cosa, me ha sacado de varias dudas que me rondaban la cabeza desde hace tiempo, por ejemplo: para qué se ponía asObservable( ), me daba cuenta de que no era estrictamente necesario pero no sabía por qué. También el por qué usar get y set en vez de métodos normales. Uno de los más importantes la diferencia real entre BehaviourSubject y Subject, etc.
Me gustaría hacerle una petición ya que explica muy bien. Quisiera que hiciera un vídeo explicando bien el concepto de usar el .pipe al momento de realizar una suscripción y los operadores más usados de RXJS (tap, map, filter, of, from, etc.).
Edit: ¡Ya veo que tiene el vídeo en cuestión! (ya me pongo a verlo).
Saludos! excelente contenido.
YA lo tienes ! th-cam.com/video/WhY33WyX0gE/w-d-xo.html
@@GentlemanProgramming Gracias! Lo vi ayer y sí, excelente, me resolvió también otra gran duda que siempre había tenido y aún así usaba los pipes y operadores RXJS, que es lo que no debería pasar. Usar métodos y características del framework como de forma mecánica sin saber realmente qué es lo que estoy implementando.
Una nota curiosa es que en entrevistas de trabajo, preguntan más fácil conceptos como Redux y muchas veces se saltan RXJS, pues yo opino que con sólidos conocimientos de RXJS el concepto de Redux sale fácil.
Muy buenos sus vídeos!
PD: ¿No ha considerado unirse a plataformas como Platzi por ejemplo? creo que ud es muy buen instructor.
¡Que excelente contenido!
Muchas gracias. Excelente contenido CRACK
Gracias a ti por seguirme mister !
Maravilloso!
Hola Alan! Gracias por tus explicaciones eres un crack! Ahora por la existencia de los Standalone simplemente importamos el servicio en los componentes standalone ?
Yes ! Fíjate que tengo vídeos sobre cómo usar angular 17 para fetch de info ;)
th-cam.com/video/Yb8oez3CMC0/w-d-xo.htmlsi=VFWwCZIxVi4r4xsg
este video me salvo !
campanita suscripto y a seguir viéndote jajaja
Muchas gracias Rodrigo !!
y con standalone components? porque generaria una instancia distinta para cada componente no?
¿Esto se mejora con los signals y effect de la v16?
Genial!!! una consulta, al cambiar de ruta y enviar una data a un behaviorsubject es posible recuperar dicho valor en la nueva ruta?
El observable es independiente de la ruta, guárdala en un servicio de más alto nivel y se mantiene
Podria almancenar el token JWT en un BehaviorSubject para no tener que guardarlo en localsorage ? segun entendi este BehaviorSubject puede persistir un valor y acceder a el cuando se necesite, no se si lo podria usar para este cometido.
No porque cada vez que navegues a otra tab, recargues la pantalla o lo que sea tendrías que volver a loguearte, el behaviorSubject solo tiene un cache ligado a la sesion.
gracias por tu video era la explicación que necesitaba, te consulto cuando usas el set en el component, es necesario hacerlo desde ahi o podría también utilizar mi set en mi component lazy donde ya había utilizado el get?
En mi caso lo hago generalmente en otro componente, si lo haces en el mismo asegúrate de que no lo hagas dentro del mismo subscribe porque sino se te haría un ciclo infinito
Hola gentleman, estoy tratando de hacer un servicio donde me traiga un json en ingles o espaniol dependiendo si en el header se cambia de idioma pero cuando cambio el idioma en el header llega hasta el servicio el cambio pero no se actualiza en los demas componentes desde donde toman los datos. Se que con esto del behaviour Subject lo puedo hacer pero no le doy a como.
Hola amigo, una consulta, estoy usando el BehaviorSubject, al usarlo entre componentes dentro de un mismo módulo va todo bien, pero cuando quiero usarlo entre componentes de distintos módulos se pierde la información, ¿Cómo debo hacerlo entre módulos?
Hola ! eso es porque tu behaviorSubject tiene que estar declarado en un módulo que comprenda a ambos módulos hijos qdonde quieres compartirlo, sino no se puede. Fijate como es la injección de dependencias entre módulos en Angular. Espero haberte ayudado !
Buenisimo loco
Muuuuchas gracias Mariano !!
Consulta esto del sharingService también serviría para traer datos desde una base de datos?o ahí si o si hay que usar get y set?
Hola Andrea ! Para traer datos de la base de datos tienes que utilizar el módulo http module y utilizar el http client para hacer la llamada a los endpoints que brinda el backend. Esto sería más que nada para compartir información dentro de la aplicación
@@GentlemanProgramming si lo intento pero sigue sin mostrarme lo que le pido que traiga...y no encuentro el error en el código, usé los mismos métodos en el frontend y en backend pero aún así no logro q se conecten y estoy utilizando httpClient,pasándole la URL de la base de datos y en cada método tengo declarado el path que debe seguir....😣
@@andreaviola640 es que la base de datos no se conecta con el front end sino con el backend. El backend tiene que crear una Api con urls, cada url determina una acción posible sobre la base de datos. Creo que te está faltando hacer el back
@@GentlemanProgramming el back lo tengo hecho con java en Netbeans,con la base de datos se conecta,pero cuando llamo a los datos en el frontend usando métodos con la misma funcionalidad que los q declaré en el back no me trae nada...
@@andreaviola640 hmmm pero dan status 200 y no tiene resultado ? O dan error ? Puede ser que en el back no se estén devolviendo las cosas en el body. Pero parecería que el problema está por ahí.
En el front si ni si ejecuta la lógica no te olvides de subscribirte a las llamadas !
Hola Alan! Como estas ! Estoy estudiando los signals y queria hacerte una consulta. Como podriamos escribir esta forma de compartir informacion pero con signals ? Se puede? Saludos!
Directo de mi segundo canal
th-cam.com/video/Yb8oez3CMC0/w-d-xo.htmlsi=Ouk9nApqOAHm0ey3
@@GentlemanProgramming gracias!!
Hola, tengo una duda. ¿Esto serviría como el localStorage para guardar información del usuario en su propio navegador?, no quiero guardar información y luego este sea visto por todos los conectados en la pagina web o que cada vez que un usuario ingrese actualize para todos los conectados anteriormente. Saludos Cordiales.
Si, pero solo vive en memoria del navegador hasta que refresca la pantalla. Es justamente para compartir información de manera volátil
Como hacer la información compartida persistente sin que se pierda al actualizar la página o componente?
Buenas ! tienes que guardarlo en el local storage, aunque no la verdad no lo recomiendo ya que puede causar problemas de seguridad.
Algunos tips sobre cúando y cómo usarlo:
1- NUNCA guardes información sensible en el local storage
2- Único caso donde usarlo es cuando sabes 100% que la información no cambia o esta solo puede ser accedida por un único usuario
3- En sistemas donde multiples usuarios pueden accionar sobre la información y accederla al mismo tiempo ya no sirve practicamente porque siempre estaría desactualizada.
Grande Alan, me sirvió mucho saber estos conceptos, bro me resultan unas dudas, se hace de la misma forma con data que viene del back?. Es que no se si estoy haciendo bien, resulta que tengo 2 componentes y en ambos llamo el servicio el cual tiene el endpoint con httpClient etc, me funciona todo bien. La duda es que en ambos componentes me debo suscribir a fuerza?, o se puede hacer con este método que indicas?. La otra duda es que en cierto componente necesito solo 2 datos de la entidad usuario, pero no body de respuesta viene con muchos datos de ese usuario, en ese caso podría hacer un pipe con un map para obtener sólo esos 2 datos?, eso sería más óptimo?, o sería mejor hacer un endpoint que me devuelva solo estos 2 datos (O ya es exagerar?), es que ahora mismo ando haciendo muchas peticiones en varios componentes que necesitan esa misma entidad, pero creo que lo que explicas en el video es el camino. Ando apenas aprendiendo bien estos conceptos entonces si ando un poco enredado. Y por último siempre que sea una petición que viene del backend toca suscribirse o se puede como decías con el async?, y en caso de suscribirse a la petición siempre toca pasar la suscripción por el ngDestroy() ?. Disculpa lo extenso, pero la verdad ando muy enredado 😅. Gracias bro y que Dios te siga bendiciendo con ese don de la enseñanza. 💪🏻
Tiene curso completo en Udemy? Yo lo compro. Muy bien explicado.
No no, tengo cursos completos aquí en youtube, quiero que sea gratuito para ustedes
¿Es posible hacerlo con un array de objetos tambien?
Yes Paol ! Totalmente :)
Te hago una consulta, este problema no los tienen los array, no? Porque hice el mismo ejemplo de usar un servicio entre dos componentes, y se actualizan.. Quizás sea por el push()?
No deberían, trata de que el array esté definido en el servicio y tengas dos métodos, uno te devuelve el array y otro le mete valores. Ahora consume el array desde un complejo te por uno de los métodos y ahora envía cambios al array desde otro que sea hermano del mismo
@@GentlemanProgramming gracias por la respuesta. Justo hoy a la tarde se me ocurrió preguntarle a ChatGPT esta duda ya que estuve varias varias horas buscando porqué tenía este comportamiento diferente los array y las variables, y esto fue lo que me respondió:
Las variables en un servicio no se reflejan automaticamente en los componentes que utilizan porque el componente obtiene una copia de la varibale. En cambio, cuando se modifica un array, esto se ve reflejado en los componentes que lo están utilizando porque el componente está utilizando la misma referencia del array que se encuentra en el servicio.
Espero que sirva de aporte.
@@gabrieltrossero8290 ah una cosa, puedes acceder a los datos sin problemas, el problema es que no vas a saber cuando se ha realizado el cambio y ahí es cuando los observables nos dan una mano
Hola Buen dia llegue a este video tratando de entender que son los observables, me ha sido util pero tambien me surgieron interrogantes que paso a detallar. Porque no usas el metodo suscribe en el componente, que tan necesario es hacerlo, cuando si y cuando no?. Muchas gracias por el video y agradeceria la aclaracion.
Hola ! Porque si te subscribes tienes que de subscribirte ! Siempre en el ondestroy, esto hace que sea un paso que puede que te olvides y puede generar los llamados memory leaks. El pipe async soluciona esto al hacerlo de manera automática. Te recomiendo mi vídeo de memory leaks aquí mismo en el canal.
@@GentlemanProgramming Gracias por la respuesta, lo tendre en cuenta. Recien estoy empezando con angular y no lo vimos tan a fondo, en mi caso tengo un boton cuyo texto y color cambia al hacerle click. Se pasa el click desde el template al componente que llama al servicio y se suscribe al observable (que actualiza un booleano a true o false ) que luego usamos para actualizar el boton. Estaba tratando de hacerlo de otro modo sin suscribe pero no logre nada.
@@augustocontreras692 los observables sólo Sirven para compartir información entre diferentes componentes. Si solamente quieres cambiar el color de un botón de acuerdo a una propiedad lo que tienes que hacer es crear una propiedad dentro del componente que luego aplicaras en el templete dentro de un ngClass. Si la variable tiene un valor le aplicas una clase sino otra. Y el valor de la misma lo cambias con el click.
Los observables no son una solución para todo, se utilizan para casos específicos en los cuales quiere compartir información entre componentes que son distintos y estos van a reacción de manera diferente acorde al valor que reciban. Para más de esto fíjate que tengo un vídeo de
Programación reactiva :)
@@GentlemanProgramming Tambien hay un template con un formulario que usa ese booleano en una propiedad ngIf para mostrar u ocultar el formulario. Aparentemente asi el componente del boton como el del formulario pueden enterarse cuando se hace click en ese boton 'agregar tarea'. Gracias por la sugerencia, voy a mirar mas de tus videos seguramente encontrare mas cosas sobre Angular.
HJola. recien encuentr tu canal, por favor agrandarias la fuente del editor? gracias
Es un vídeo bastante viejo, ya los nuevos deben de estar perfect !
lo hice igual a como estaba echo y no funciono(solo la primera ves carga en cuando entra a NgOnInit el valorpor defecto, luego de eso ya no escucha los cambios), puede ser porque uno de mis 2 componentes forma parte de otro componente dentro de ng - content?(estoy utilizando un componente de modal popup que crea un modal con ng content), que podría hacer para que si los escuche a los cambios.
Seleccionar ubicación del contenedor
Seleccione la ubicación que desee
como se puede ver app-mapa-seleccion esta dentro de los tags de y luego esta en la estructura del form.
lo que estoy intentando hacer es seleccionar una localidad de un combo de selección y luego pintar en un mapa de leaflet mediante un geojson, pero el observavle no esta funcionando y pienso que es por eso de ng content.
Buen video, explicas muy bien, saludos
Hola ! Podrías enviar el código de ts? También te invito al discord de la comunidad, por ahí es más fácil hacer la consulta por ahí.
Fíjate que sea un behaviourSubject por si uno se subscribe antes que el otro. También fíjate que sea la misma instancia del servicio, trata de que la declaración del mismo se haga en el módulo que declara a los dos componentes.
@@GentlemanProgramming gracias, estoy realizando mi tesis final de Analista Programador y ahora estaba trancado con este tema, la instancia puede ser distinta, la cree en cada componente
¿Cómo se podría recuperar la información si se refresca la página?
Ahí está el asunto verdad? La solución son los local storage ! Hay que tener un balance muy justo entre que información almacenar, trata de que sea lo menos posible y nada con carácter sensible.
@@GentlemanProgramming como buena practica que se puede almacenar en local storage en un app real.. o es recomendable utilizar solo un state manager?
@@danabaiardi5452hola ! Generalmente es recomendable en el state de la app, y que cada vez que se recargue se vuelva a buscar la información. Si necesitas que se guarda aún en recarga, debes de ofuscar la información aplicando algún algoritmo.
Si es información que tiene otro tipo de seguridad (como lo es un token que luego se refresca y se válida en el back) no pasa nada :)
Excelente, yo me fui a Ngrx sin conocer el BehaviorSubject
aunque no lo creas... es MUY normal ! generalmente nos vamos a utilizar frameworks y librerias sin aprender las bases de las mismas. Así que no te sientas mal que es lo más común del mundo jajaja :D
Buen video, una consulta, si en mi aplicación cargo catálogos preseleccionados dependiendo el usuario, para llenar estos catálogos hacer lo dle video me serviría, es decir si al loguearme trago la data de los catálogos y la emito, podre usar esa data en diferentes módulos, seria buena práctica o por cada componentes donde use los catálogos hacer la petición? Eso no se me hace viable :c
Si se usa en todos lados, dale nomas desde el mínimo padre de ellos. Eso quiere decir, que si tienes 2 modulos, y dentro de uno de ellos usas info repetida, solo haz la peticion en ese módulo en particular y no en el padre de los dos primeros
Muchas gracias), pero BijaviorSubject es poderoso, pero no es mejor usar NGRX?, si un poco mas escript pero facil obtener data.
Ngrx puede ser demasiado para algo súper simple como compartir información entre componentes, se utiliza para almacenar entidades que pueden ser reutilizadas en TODA la app, no solo en una vista.
También para los que recién empiezan puede ser bastante tedioso de aprender, desde el uso de los reducers y las acciones hasta la implementación de efectos.
@@GentlemanProgramming Gracias)
Hola, excelente video. Intendo hacer lo mismo pero me sale linea roja y el error dice "cannot assign to '__nombreVariable__ ' because it is a read-only property, en mi AppModule.ts cuando intento asignar un objeto como lo hiciste al final del video para cambiar el estado del behavios subject. Si alguien pudiera ayudarme, gracias.
Excelente explicación, pero una duda :), si quiero suscribirme a ese Behavior por ejemplo en otro servicio o en un guard para obtener un dato del usuario ¿es un problema de rendimiento? ¿tengo que desuscribirme?, muchas gracias por tus excelentes aportes
Hola ! Es mucho mejor, si quieres el dato de un user para un momento en específico (que es lo que generalmente pasa en un guard o un servicio), solo te interesa el valor contenido dentro del behavior para ese momento en particular. Para ello puedes usar “.value” para obtener el valor sin subscribirse, eso te devolverá el último elemento que haya pasado por el behavior.
Recuerda que esto es algo propio de los BehaviorSubjects gracias a su buffer interno que almacena siempre el último valor enviado.
Espero haberte ayudado !!
Me sirvió demasiado! pero tengo una pequeña duda, cómo se puede hacer para que el valor que se muestra (por ejemplo "la información cambio") no se cambie, ya que si refresco la página, de nuevo dice "Gentleman Programming"
Deberías almacenarlo en una variable en el localstorage o usando redux.
Excelente explicación, solo que deberías subir los videos en HD o 720 por lo menos, pero de antemano muchas gracias :D
recarga ! eres de las primeras visitas jajja, recién estaba subido y siempre tarda un poco en renderizar pero ya esta en 1080p y a 60 fps :)
@@GentlemanProgramming Buenisimo!!
@@GentlemanProgramming muchas gracias, es que tengo la campanita activa y me notifica :D. muchas gracias.
@@samuelmorales2919 Muchas gracias por esooo, me pone super contento de tener gente que espera mis videos :) Cuanto más pueda ayudar, más feliz soy !!!
Quizá mi comentario se pierda, pero no me quedo claro de que forma se entera el componente que la información ya esta servida, en el caso de hacer una solicitud HTTP
@@minitoy1070 si es el mismo componente por el uso de promesas y entre componentes distintos por el uso de observable ! El observable es el canal de comunicación y luego cada componente se pone a escuchar qué pasa por el mismo, reaccionando a la información que pase por él.
@@GentlemanProgramming Gracias lo practiqué ayer y me quedo más claro , ahora con tu explicación queda todavía más claro me suscribo 😁
crack
donde consigo esa camisa ? jajaja
PULL & BEAR 🐻 😬
@@GentlemanProgramming con este video me salvaste en el trabajo!!
@@michaeltorresospina9993 vamooooooo, muuucha alegria al leer eso 🥹🥹