Qué son los Observables ? - Cómo compartir información en Angular ? No problem ! 😉😉

แชร์
ฝัง
  • เผยแพร่เมื่อ 28 พ.ค. 2021
  • Buenas a todos !!
    Como parte de nuestros videos más corto les traigo... cómo compartir información entre componentes de la mejor manera y con las mejores buenas practicas posibles!!
    Si quieres dejar de usar los inputs/outpus, aprender un poco de programación reactiva, diferentes tipos de observables y la mejor manera de guardar / escribir información en los mismos....
    A por ello !!!
    Si quieres hacer una donación:
    streamelements.com/gentlemanp...
    ▬ Links de interés ▬▬▬▬▬▬▬▬▬▬
    gentleman-state-manager Github: github.com/AppleLAN/gentleman...
    gentleman-state-manager npm: www.npmjs.com/package/gentlem...
    Video sobre gentleman-state-manager: • Librería Gentleman Sta...
    Link a Spotify: spoti.fi/3y281cY
    Link a la comunidad: / discord
    LInk al libro "Cómo ser front-end sin fallar en el intento: Tus primeros pasos en la programación web": amzn.to/2ReBuzL
  • วิทยาศาสตร์และเทคโนโลยี

ความคิดเห็น • 146

  • @felixalexandercarrascosanc3690
    @felixalexandercarrascosanc3690 หลายเดือนก่อน

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

  • @josebergues
    @josebergues หลายเดือนก่อน

    Descomunal la explicación, impecable y super clara. Ya mismo me suscribo a este canal!

  • @dibuchis
    @dibuchis ปีที่แล้ว +2

    Genial, muy bien explicado, gracias por esos 16 minutos tan productivos, porque hay tanto en internet y tan poco como estos videos.

  • @santiago.rivero
    @santiago.rivero 3 ปีที่แล้ว +3

    Excelente como siempre Mister, súper útil. A la espera de más videos cortitos

  • @anrras
    @anrras ปีที่แล้ว +1

    Mejor explicado imposible, corto y conciso

  • @JEstebanC
    @JEstebanC 9 หลายเดือนก่อน +2

    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

    • @GentlemanProgramming
      @GentlemanProgramming  9 หลายเดือนก่อน

      Muchas gracias de corazón Juan por tu mensaje!!! ❤️❤️

  • @joseperezbalan7788
    @joseperezbalan7788 10 หลายเดือนก่อน +1

    Muy bien explicado, ya lo habia estudiado como tres veces... pero como que algo no me quedaba claro... hasta que vi tu video..

  • @mateoduque6935
    @mateoduque6935 2 ปีที่แล้ว +2

    Excelente explicación, muchas gracias. Saludos desde Medellín-Colombia (Y)

  • @JohnDuarte7
    @JohnDuarte7 ปีที่แล้ว +1

    vi un viaje de videos y perdido vi el tuyo y tines talento para explicar felicitaciones

  • @carlossantaella3940
    @carlossantaella3940 10 หลายเดือนก่อน +1

    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

  • @danielmeza7156
    @danielmeza7156 3 ปีที่แล้ว +8

    11:20 - Mostrar la información del Observable en el template html. Usando el pipe "async"

  • @_josuealonso
    @_josuealonso 2 ปีที่แล้ว +5

    Que buen video por dios, 16 minutos explicando lo justo y con ejemplos, objetivo todo, genial me encanto

  • @jeisonsalazar71
    @jeisonsalazar71 8 หลายเดือนก่อน

    Soy nuevo en el tema de angular, esto es genial. Lo mejor es conocimiento uintermedio que puedo empezar a aplicar. Estoy maravillado. Muchas gracias.

  • @DERGONokay
    @DERGONokay 2 ปีที่แล้ว +3

    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!

    • @GentlemanProgramming
      @GentlemanProgramming  2 ปีที่แล้ว

      De nada Dergon !!! Espero que te haya quedado beautiful ese code !!

  • @carlosriverahn
    @carlosriverahn 2 ปีที่แล้ว +1

    Me ha encantado el video, 16 minutos invaluables.
    Gracias.

  • @juancamilorojas2699
    @juancamilorojas2699 ปีที่แล้ว +1

    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!

  • @programadorextraterrestre
    @programadorextraterrestre ปีที่แล้ว +1

    Gracias por este video, me ayudó un montón a resolver un problema importante

  • @zerilanka
    @zerilanka 3 ปีที่แล้ว +1

    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.

    • @GentlemanProgramming
      @GentlemanProgramming  3 ปีที่แล้ว +1

      Que bueno Carlos !!! Muy contento que te haya servido, de eso se trata

  • @tonytapullimanunez1799
    @tonytapullimanunez1799 ปีที่แล้ว

    el CAMILO de la programación!!! bien ahi

  • @MegaCain16
    @MegaCain16 2 ปีที่แล้ว +1

    que capo que sos compartes informacion real que se usa en el dia a dia en el trabajo

    • @GentlemanProgramming
      @GentlemanProgramming  2 ปีที่แล้ว

      Gracias miles Abraham ! 🥰🥰 eeeesa es la idea, explicar no solo a nivel conocimiento sino también en experiencia

  • @manuel.gonzalez.10
    @manuel.gonzalez.10 2 ปีที่แล้ว +1

    Excelente explicación como siempre. Gracias mister

  • @mareasperez7
    @mareasperez7 ปีที่แล้ว +1

    Siempre vuelvo a ver este video del buen Alan cuando aun tenia el mustacho! para recordar la sintaxis del behavior subject

    • @GentlemanProgramming
      @GentlemanProgramming  ปีที่แล้ว

      Ya volvió ! Como tú a ver este content, gracias por el apoyo !

  • @josealejandrotrejorivera498
    @josealejandrotrejorivera498 3 ปีที่แล้ว +1

    Muchas gracias. Excelente contenido CRACK

  • @diegopagini1877
    @diegopagini1877 3 ปีที่แล้ว +1

    Excelente. Como siempre!

    • @GentlemanProgramming
      @GentlemanProgramming  3 ปีที่แล้ว

      Gracias Dieguito queridoooo cualquier cosa me dices por la comunidad :)

  • @luisgutierrez1481
    @luisgutierrez1481 ปีที่แล้ว +1

    ¡Que excelente contenido!

  • @fernandoandressalas7922
    @fernandoandressalas7922 ปีที่แล้ว +1

    Me sirvió. Muchas gracias.

  • @logicalMultimediaAgency
    @logicalMultimediaAgency 3 ปีที่แล้ว +1

    Maravilloso!

  • @stefanomazziotta1270
    @stefanomazziotta1270 2 ปีที่แล้ว +1

    Muy buena la explicación, gracias!

  • @lapiedrangular
    @lapiedrangular 2 ปีที่แล้ว +4

    Muchas gracias, casi ningún ejemplo explica como utilizar los datos de los observables en las vistas html, buen aporte!

    • @GentlemanProgramming
      @GentlemanProgramming  2 ปีที่แล้ว

      Muchas gracias a tí por el comment ! espero que disfrutes de los otros videos también :D

  • @EduardoMartinez-dm5pp
    @EduardoMartinez-dm5pp 8 หลายเดือนก่อน

    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

    • @GentlemanProgramming
      @GentlemanProgramming  8 หลายเดือนก่อน +1

      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á ;)

  • @carlosmorales1866
    @carlosmorales1866 3 ปีที่แล้ว +1

    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 :)

    • @GentlemanProgramming
      @GentlemanProgramming  3 ปีที่แล้ว

      Muchas gracias Carlos !! como siempre muy contento de que seas un Gentleman Programmer !!

  • @ramonmartinez1144
    @ramonmartinez1144 3 ปีที่แล้ว +4

    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

    • @GentlemanProgramming
      @GentlemanProgramming  3 ปีที่แล้ว +4

      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

    • @ramonmartinez1144
      @ramonmartinez1144 3 ปีที่แล้ว

      @@GentlemanProgramming También es valido muy bueno...

  • @rodrigocosentino8716
    @rodrigocosentino8716 3 ปีที่แล้ว +1

    este video me salvo !
    campanita suscripto y a seguir viéndote jajaja

  • @danielmeza7156
    @danielmeza7156 3 ปีที่แล้ว +1

    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.

    • @GentlemanProgramming
      @GentlemanProgramming  3 ปีที่แล้ว +1

      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

    • @danielmeza7156
      @danielmeza7156 3 ปีที่แล้ว +1

      @@GentlemanProgramming Gracias por tu dedicación con nosotros los nuevos 💪

  • @douglasperez3701
    @douglasperez3701 ปีที่แล้ว +1

    Pasara el tiempo y siempre me doy una vuelta por aca para dar una repasada ante cualquier bloqueante que tengo jajajaja.

  • @danielmeza7156
    @danielmeza7156 3 ปีที่แล้ว +2

    8:19 - Enchulando los métodos (buenas prácticas) utilizando "get" y "set" en los métodos del sharingService

  • @mpalaciost
    @mpalaciost ปีที่แล้ว +1

    Genial la explicación!!!!.. Gracias por compartir tu conocimiento, un abrazo desde Perú.

    • @GentlemanProgramming
      @GentlemanProgramming  ปีที่แล้ว

      Abrazos desde Españaaaa !! 🔥🔥🔥🔥

    • @mpalaciost
      @mpalaciost ปีที่แล้ว +1

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

    • @GentlemanProgramming
      @GentlemanProgramming  ปีที่แล้ว +1

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

    • @mpalaciost
      @mpalaciost ปีที่แล้ว +1

      @@GentlemanProgramming ok Alan, gracias por darte un tiempo en responderme. Un abrazo!!!

  • @marianobagnarelli4581
    @marianobagnarelli4581 2 ปีที่แล้ว +1

    Buenisimo loco

  • @carloseduardohincapiehidal4107
    @carloseduardohincapiehidal4107 5 หลายเดือนก่อน

    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

  • @danielmeza7156
    @danielmeza7156 3 ปีที่แล้ว +2

    07:02 - Método para devolver un Observable sin permiso para emitir un valor a ese observable. Sólo escuchar.

  • @cristianseo
    @cristianseo ปีที่แล้ว +2

    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
      @GentlemanProgramming  ปีที่แล้ว

      YA lo tienes ! th-cam.com/video/WhY33WyX0gE/w-d-xo.html

    • @cristianseo
      @cristianseo ปีที่แล้ว

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

  • @juancarloslopezcarrasco276
    @juancarloslopezcarrasco276 ปีที่แล้ว

    ¿Esto se mejora con los signals y effect de la v16?

  • @mauriciocucco4466
    @mauriciocucco4466 3 ปีที่แล้ว +2

    Excelente, yo me fui a Ngrx sin conocer el BehaviorSubject

    • @GentlemanProgramming
      @GentlemanProgramming  3 ปีที่แล้ว +2

      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

  • @campeone3
    @campeone3 ปีที่แล้ว

    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.

  • @davidmontoya2787
    @davidmontoya2787 ปีที่แล้ว +1

    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. 💪🏻

  • @julianpatino6622
    @julianpatino6622 6 หลายเดือนก่อน +1

    Tiene curso completo en Udemy? Yo lo compro. Muy bien explicado.

    • @GentlemanProgramming
      @GentlemanProgramming  6 หลายเดือนก่อน +1

      No no, tengo cursos completos aquí en youtube, quiero que sea gratuito para ustedes

  • @fernandorodriguez5036
    @fernandorodriguez5036 ปีที่แล้ว

    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.

  • @ddgutierrez
    @ddgutierrez 4 หลายเดือนก่อน +1

    Hola Alan! Gracias por tus explicaciones eres un crack! Ahora por la existencia de los Standalone simplemente importamos el servicio en los componentes standalone ?

    • @GentlemanProgramming
      @GentlemanProgramming  4 หลายเดือนก่อน +1

      Yes ! Fíjate que tengo vídeos sobre cómo usar angular 17 para fetch de info ;)

    • @GentlemanProgramming
      @GentlemanProgramming  4 หลายเดือนก่อน +1

      th-cam.com/video/Yb8oez3CMC0/w-d-xo.htmlsi=VFWwCZIxVi4r4xsg

  • @marieltorres2873
    @marieltorres2873 ปีที่แล้ว +1

    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?

    • @GentlemanProgramming
      @GentlemanProgramming  ปีที่แล้ว +1

      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

  • @hernanfloresramirez3163
    @hernanfloresramirez3163 ปีที่แล้ว +1

    Genial!!! una consulta, al cambiar de ruta y enviar una data a un behaviorsubject es posible recuperar dicho valor en la nueva ruta?

    • @GentlemanProgramming
      @GentlemanProgramming  9 หลายเดือนก่อน +1

      El observable es independiente de la ruta, guárdala en un servicio de más alto nivel y se mantiene

  • @danielpinilla9679
    @danielpinilla9679 ปีที่แล้ว +1

    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.

    • @GentlemanProgramming
      @GentlemanProgramming  ปีที่แล้ว

      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.

  • @urtaav639
    @urtaav639 ปีที่แล้ว +1

    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

    • @GentlemanProgramming
      @GentlemanProgramming  ปีที่แล้ว +1

      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

  • @ormenodiego147
    @ormenodiego147 6 หลายเดือนก่อน

    y con standalone components? porque generaria una instancia distinta para cada componente no?

  • @LeonardotIBK
    @LeonardotIBK ปีที่แล้ว +1

    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?

    • @GentlemanProgramming
      @GentlemanProgramming  ปีที่แล้ว

      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 !

  • @samuelmorales2919
    @samuelmorales2919 3 ปีที่แล้ว +1

    Excelente explicación, solo que deberías subir los videos en HD o 720 por lo menos, pero de antemano muchas gracias :D

    • @GentlemanProgramming
      @GentlemanProgramming  3 ปีที่แล้ว +2

      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 :)

    • @danielmeza7156
      @danielmeza7156 3 ปีที่แล้ว +1

      @@GentlemanProgramming Buenisimo!!

    • @samuelmorales2919
      @samuelmorales2919 3 ปีที่แล้ว +1

      @@GentlemanProgramming muchas gracias, es que tengo la campanita activa y me notifica :D. muchas gracias.

    • @GentlemanProgramming
      @GentlemanProgramming  3 ปีที่แล้ว

      @@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 !!!

  • @iamjosedev
    @iamjosedev ปีที่แล้ว +1

    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.

    • @GentlemanProgramming
      @GentlemanProgramming  ปีที่แล้ว

      Si, pero solo vive en memoria del navegador hasta que refresca la pantalla. Es justamente para compartir información de manera volátil

  • @marcosgalaviz4904
    @marcosgalaviz4904 2 ปีที่แล้ว +1

    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

    • @GentlemanProgramming
      @GentlemanProgramming  2 ปีที่แล้ว +1

      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 !!

  • @giancarlo3974
    @giancarlo3974 ปีที่แล้ว +1

    Como hacer la información compartida persistente sin que se pierda al actualizar la página o componente?

    • @GentlemanProgramming
      @GentlemanProgramming  ปีที่แล้ว

      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.

  • @paollarce5137
    @paollarce5137 2 ปีที่แล้ว +1

    ¿Es posible hacerlo con un array de objetos tambien?

  • @gustavovelazquez9495
    @gustavovelazquez9495 ปีที่แล้ว +1

    HJola. recien encuentr tu canal, por favor agrandarias la fuente del editor? gracias

    • @GentlemanProgramming
      @GentlemanProgramming  ปีที่แล้ว

      Es un vídeo bastante viejo, ya los nuevos deben de estar perfect !

  • @ddgutierrez
    @ddgutierrez 4 หลายเดือนก่อน +1

    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!

    • @GentlemanProgramming
      @GentlemanProgramming  4 หลายเดือนก่อน +1

      Directo de mi segundo canal
      th-cam.com/video/Yb8oez3CMC0/w-d-xo.htmlsi=Ouk9nApqOAHm0ey3

    • @ddgutierrez
      @ddgutierrez 4 หลายเดือนก่อน +1

      @@GentlemanProgramming gracias!!

  • @andreaviola640
    @andreaviola640 2 ปีที่แล้ว +1

    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?

    • @GentlemanProgramming
      @GentlemanProgramming  2 ปีที่แล้ว

      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

    • @andreaviola640
      @andreaviola640 2 ปีที่แล้ว +1

      @@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....😣

    • @GentlemanProgramming
      @GentlemanProgramming  2 ปีที่แล้ว

      @@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

    • @andreaviola640
      @andreaviola640 2 ปีที่แล้ว +1

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

    • @GentlemanProgramming
      @GentlemanProgramming  2 ปีที่แล้ว

      @@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 !

  • @augustocontreras692
    @augustocontreras692 2 ปีที่แล้ว +1

    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.

    • @GentlemanProgramming
      @GentlemanProgramming  2 ปีที่แล้ว +1

      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.

    • @augustocontreras692
      @augustocontreras692 2 ปีที่แล้ว +1

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

    • @GentlemanProgramming
      @GentlemanProgramming  2 ปีที่แล้ว

      @@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 :)

    • @augustocontreras692
      @augustocontreras692 2 ปีที่แล้ว

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

  • @TheMindoflears
    @TheMindoflears ปีที่แล้ว

    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"

    • @alejandroelias868
      @alejandroelias868 10 หลายเดือนก่อน

      Deberías almacenarlo en una variable en el localstorage o usando redux.

  • @SergioUkrAr
    @SergioUkrAr 2 ปีที่แล้ว +1

    Muchas gracias), pero BijaviorSubject es poderoso, pero no es mejor usar NGRX?, si un poco mas escript pero facil obtener data.

    • @GentlemanProgramming
      @GentlemanProgramming  2 ปีที่แล้ว +1

      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.

    • @SergioUkrAr
      @SergioUkrAr 2 ปีที่แล้ว

      @@GentlemanProgramming Gracias)

  • @gabrieltrossero8290
    @gabrieltrossero8290 ปีที่แล้ว +1

    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()?

    • @GentlemanProgramming
      @GentlemanProgramming  ปีที่แล้ว +1

      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

    • @gabrieltrossero8290
      @gabrieltrossero8290 ปีที่แล้ว +1

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

    • @GentlemanProgramming
      @GentlemanProgramming  ปีที่แล้ว +1

      @@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

  • @MrEldetective007
    @MrEldetective007 2 ปีที่แล้ว +1

    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

    • @GentlemanProgramming
      @GentlemanProgramming  2 ปีที่แล้ว

      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.

    • @MrEldetective007
      @MrEldetective007 2 ปีที่แล้ว

      @@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

  • @juandanielbombelarivera5893
    @juandanielbombelarivera5893 2 ปีที่แล้ว +1

    ¿Cómo se podría recuperar la información si se refresca la página?

    • @GentlemanProgramming
      @GentlemanProgramming  2 ปีที่แล้ว +1

      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.

    • @danabaiardi5452
      @danabaiardi5452 2 ปีที่แล้ว +1

      @@GentlemanProgramming como buena practica que se puede almacenar en local storage en un app real.. o es recomendable utilizar solo un state manager?

    • @GentlemanProgramming
      @GentlemanProgramming  2 ปีที่แล้ว +1

      @@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 :)

  • @michaeltorresospina9993
    @michaeltorresospina9993 2 ปีที่แล้ว +1

    donde consigo esa camisa ? jajaja