▶ 🅲🆄🆁🆂🅾 How to PASS (broadcast) DATA between COMPONENT TO ANOTHER IN ANGULAR with SERVICE?

แชร์
ฝัง
  • เผยแพร่เมื่อ 6 ก.ย. 2024

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

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

    ├ 𝙑𝙀𝙍 𝙏𝙊𝘿𝙊𝙎 ⮕ leifermendez.github.io/#/
    ├ 𝘼𝙉𝙂𝙐𝙇𝘼𝙍 desde cero ⮕ bit.ly/367tJ32
    ├ 𝙉𝙊𝘿𝙀 Express desde cero ⮕ bit.ly/3od1Bl6
    ├ 𝙈𝙊𝙉𝙂𝙊𝘿𝘽 desde cero ⮕ bit.ly/3qh35wK
    ├ 𝙎𝙊𝘾𝙆𝙀𝙏.𝙄𝙊 desde cero ⮕ bit.ly/3pg1Q02
    └ 𝙉𝙂𝙍𝙓 𝙙𝙚𝙨𝙙𝙚 𝘾𝙀𝙍𝙊 ⮕ link.codigoencasa.com/NODE

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

    Estoy agradecido eternamente por tu explicación, ya lleva 2 días buscando información sobre este tema y fuiste el único que lo supo explicar de manera sencilla y clara de entender.

  • @angielollipop
    @angielollipop 3 ปีที่แล้ว +14

    Acabas de salvar mi proyecto de Ingeniería de Software, ¡gracias!

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

      Un gusto que sea de tu ayuda 😎

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

    me acuerdo hace un mes vi este video y como maneja poco angular no entendia absolutamente nada lo que hacias y nunca me funciono.
    Ahora lo volvi a ver y todo muy facil, asi que muy bueno el contenido.

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

    Muchisimas gracias bro. acabaste de salvarme de la locura con un problema que tenia respecto al tema que expusiste hoy... en serio te lo agradezco y espero sigas subiendo videos asi, que motiven a los que se encaminan por este mundo a seguir creciendo y a que no se rindan 🥳🥳

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

    Jamas nadie explicó tan claro como vos, man! mil gracias!! SUSCRITO

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

      Gracias Alexis! por formar parte de esta comunidad

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

    Ando iniciando en Angular y he estado haciendo algunas pequeñas apps para entender todo este tema de componentes y su comunicación. Y justo necesita ver este tema de comunicación de componentes de la misma jerarquía. No sé me había ocurrido que un service puede tener un output, hasta el momento lo que había hecho era pasar la información del hijo al padre con un output y del padre al otro hijo con un input y viceversa jajajaja. Muchas gracias, tus videos me han ayudado mucho. Exitos!

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

    Salvaste mi proyecto de trabajo, te amo

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

    Hola Leifer, muy buenos tus videos, pero estuve muchas horas tratando de reproducir este ejemplo y tratando de hacer lo mismo en mi aplicacion, pero 1: al hacer click la primera vez no me mostraba los datos, a la segunda vez si, pero nunca pude mostrar los datos en el segundo componente,
    La solucion estaba en angular materials, mas encima lo estaba usando, quizas fue por eso, de hecho soy beginer en angular, en fin, pasar datos con materials es muy sencillo

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

    andaba como loco metiendo todo en un mismo componente, , por no tener claro como compartir variables entre estas, andaba por las malas practicas :(, toca un poco de reproceso para corregir, pero andaré por el camino del bien. Muchas gracias por el dato. Me sirvio un resto.

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

    Muchas gracias, en verdad me ayudo, excelente contenido!

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

    Muchas gracias, me ayudo mucho con mi trabajo, ¡saludos!

  • @henrymartinez1055
    @henrymartinez1055 24 วันที่ผ่านมา

    Hola excelente video. tengo una pregunta : si haces click 2 veces en el mismo boton de agregar favoritos va a aparecer 2 veces el elemento en favoritos?

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

    Muchas gracias, muy bien explicado

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

    Amigo, muy buen viedo, mil gracias! pero tengo una pregunta, como se le podria hacer pruebas unitarias al suscribe con la respuesta?

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

      Hola Andrés, te dejo la playlist de testing.
      th-cam.com/video/E1hCmwgN6kY/w-d-xo.html

  • @DanielAlvarez-yh1yx
    @DanielAlvarez-yh1yx 2 ปีที่แล้ว +2

    muchas gracias por tus aportaciones amigo..
    una consulta quiero mandar datos de una tabla a otra tabla, como puedo hacer
    alguien?

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

      Hola Daniel lo que debes hacer es un servicio intermedio donde tengas la data y luego las 2 o X tablas debes inyectar el servicio para que de esta manera todas las tablas puedan acceder a la misma informacion

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

    En mi caso quiero mostrar la información de lo que seleccione en una modal que está en la misma página, hice los pasos que muestras y funciona, solo que al presionar el siguiente se muestra en la modal el arreglo de datos de todos los que seleccione, ¿cómo puedo hacer que solo se muestre uno por uno? Pero me ayudaste mucho a entender como funciona todo, ¡muchas gracias!

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

      ¡Ya pude hacerlo! Por si a alguien le sucede lo mismo, simplemente en vez de hacer un this.listdeVideos.push(data) seria this.listdeVideos= Array.of(data);
      *El array of data es porque no permite iterar objetos si no arreglos de objetos y con el Array.of(data) convertimos la data que nos envían como objeto en arreglo y asi solo nos muestra la información de un video y no de todos.
      ¡Muchas gracias Leifer, me has salvado!

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

      Hola Gineth gracias a ti por formar parte de esta comunidad :) espero que los videos sean de utlidad! te invito a canjear un cupon de mi curso de Angular link.codigoencasa.com/ANGULAR-JR

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

    Esta información es de otro mundo! Gracias

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

    gracias, estoy haciendo un carrito de compras, como puedo hacer si tengo un boton "borrar" que ese mismo objeto que agregue, se borre de mi componente donde recibo los datos?

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

    Consulta es necesario colocar el decorador OUTPUT? Esto debido a que sin dicho decorador con solo declarar una variable del tipo EVENT EMITTER funciona también o cuál sería la diferencia entre ambas formas

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

    Buenas, lo hice tal cual y no me emite ningun dato, podria alguien ayudarme ?

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

      Hola Gabriel podrías compartir el link del código o montar el ejemplo en stackblitz

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

    Gracias!!!

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

    hola muy buen video amigo super claro, una consulta es necesario implementar metodo ondestroy para hacer el unsubscribe y destruir el obsevable que esta en memoria ?

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

    Hola quisiera saber como editar el tamaño de la imagen al momento de agregarlo a la lista, ya que lo intente de varias formas en los css y no me permitió, alguien sabe a través de cual componente se deba hacer (intente con los que supuse que eran)
    Gracias Leifer Mendez, como siempre explicas muy bien!!!

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

      Yo tengo el mismo problema, no se si alguien sepa la respuesta porque yo tampoco he podido modificar el tamaño de las imagenes :c

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

    Que fácil se ve, mil gracias

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

      Gracias a ti por formar parte de esta comunidad!

  • @JonathanBarreto-JStickB
    @JonathanBarreto-JStickB ปีที่แล้ว

    Es mejor o usar el input/output o servicio? o cualquiera de los dos es valido?

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

    como puedo hacer para que la data sea persistente si actualizo la página?

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

      Hola Giancarlo buen día! Pasate sí deseas por el canal de discord donde tengo una sección orientada a la asesoría técnica.
      Te dejo el link a mi comunidad por si deseas unirte, allí podrás encontrar algún colega dispuesto a apoyarte.
      link.codigoencasa.com/discord
      ¡Un saludo!

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

    Hola tengo un problema, necesito poner la data que estoy recibiendo en un formulario y no me deja acceder a ella, estoy intentando utilizar un ngFor para iterar sobre el array pero no me aparece en el HTML

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

    Hola !! Super pedadogico ! me encanto.. solamente que no entendi porque usas input tambien.. al usar sercivios no solo suplantamos?

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

      Hola Any exactamente puedes usar los servicios sin los Input solo era un ejemplo al momento heh

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

      @@LeiferMendez Gracias ! Ahora lo comprendi acabadamente !!

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

    información valiosa!

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

      Muchas gracias. Estoy subiendo contenido cada 2 días gracias por el apoyo y comparte

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

    es genial todo tu contenido, donde puedo ver los estilos que aplicas? porque me queda pero no tan lindo 😅

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

      Hola Jimenta, te dejo el repositorio.
      github.com/leifermendez/curso-angular-11
      Un saludo!

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

    Saludos cabe mencionar que no soy un experto en angular, pero he realizado este ejercicio sin necesidad de crear un servicio y creo que es más sencillo de entender sin usar un servicio valga la redundancia, es decir que el componente hijo emita la variable y el mismo capturarlo por medio de un método en el componente padre

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

      Hola Jesús y bienvenido claro que sí tienes toda la razón incluso está en el vídeo anterior del curso el método que comentas. Este método se usa cuando no tienes los componentes en una jerarquía. Ejemplo imaginemos tienes un menú lateral donde tienes la imagen del Avatar entonces desde otro componente donde no tienes implementado el menú para poder interactuar con ese Avatar lo haces mediante un servicio 😎!

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

      Saludos @@LeiferMendez, gracias por la explicación y sobre todo por aportar conocimiento en esta plataforma. Éxitos y bendiciones

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

    Tengo un error, al presionar un botón tengo que hacerlo dos veces, porque a la primera no se guarda la información que deseo pasar al otro componente, como soluciono eso. Gracias

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

    Muchas Gracias, muy buena expliacion amigo!

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

      Gracias por ver. Estás comenzando en angular ?

  • @JorgeGomez-vp2ry
    @JorgeGomez-vp2ry 5 หลายเดือนก่อน

    thanks

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

    Hola, estoy intentando esta comunicación entre dos componentes, en el primero redirecciono al usuario a una ruta con .navigate, y cuando inicio el componente de la nueva ruta debería llamar el servicio para recibir los datos, pero llegan undefined, podría ser problema del .navigate?

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

      Me parece que al navegar a otra ruta entonces pierdes todos los datos del service porque están recargando nuevamente la págia. Lo que podrías hacer es trabajar también con el localStorage para la persistencia de datos.

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

    Pregunta… suponiendo que tengo un progres bar, que me muestra el resultado de lo que me regresa un servicio cada segundo, ya tengo el progres bar como componente y le mando los datos por el imputado, perfecto, como lo actualizo cada que me regrese la info el repuesto, por medio del service vdd? Así como este service cambia. Estoy en lo correcto? Gracias

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

      Pero te refieres como a una barra de loading de la pagina o algo diferente ?

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

      @@LeiferMendez es, por así decirlo, el servicio me regresa usuarios conectados, por ejemplo, entonces hay 5… luego 12, luego 7, y así, es cambiar ese dato mandándoselo a una progres bar y/o a una circule progres bar, el que está en nombre jeje, seria usarlo casi igual supongo, no? Gracias.

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

    De un componente como puedo ejecutar una funcion que se encuentra en otro componente?

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

    Interesante implementación

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

    grande

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

    Cómo puedo sacar la response del subscribe ??? Necesito hacer unas validaciones en mi proyecto

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

      Puedes utilizar la función ngOnChanges para detectar cambios en un componente y así asignar datos a una variable que aún no llegaba

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

    Tengo una pequeña duda.... Eres la primera persona que veo que utiliza el Output desde un servicio. Normalmente siempre veo que se utiliza desde el TS y el componente padre lo recibe ( respuestaHijo ) = $event. Me pareció muy curioso y practico el hecho de suscribirse a evento pero hay alguna desventaja hacerlo de esta forma?

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

      Un evento lo puedo usar desde componente o servicio lo importante es. No abusar de ellos 🤓

  • @cristianm.t6957
    @cristianm.t6957 2 ปีที่แล้ว

    hola. tengo un problema yo implemente ese metodo para poder redireccionarme a la pagina de favoritos. con un navegate, el problema es que renderiza la pagina sin mostrar en la pantalla el array. existe solucion para eso ?

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

      Hola Cristian, tienes tu proyecto en un repositorio que puedas compartir para poder ayudarte.
      ¡Un saludo! ✌️

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

    Que theme utilizas para visual studio code

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

      Hola Edert uso el github theme

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

    No me obtiene el valor del subscribe, donde pones "this.listVideos.push(data)" y no me muestra nada en el html

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

      Puedes colocar el codigo que tienes en un git para poder verlo gist.github.com/

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

      @@LeiferMendez Sí, gracias ya lo mande

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

      @@TheNordicRaven2077 pero compárteme el link ya sea por este medio o al email dela descripción

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

      @@LeiferMendez gist.github.com/dexcarloss/e60625e0c6874aeff5a4251d143f4d60

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

      Creo saber cual es el error , también me pasó, cuando creo el servicio automaticamente te agrega estas dos lineas de importación:
      import { Injectable, Output } from '@angular/core';
      import * as EventEmitter from 'events';
      Pero contrastando con el repositorio del proyecto está con una sola linea:
      import { EventEmitter, Injectable, Output } from '@angular/core';
      Lo puse como está en el repositorio y funcionó!!, porqué pasa esto? ya que en la consola me salia este error también:
      ERROR TypeError: this.servicioFavorito.disparadorDeFavoritos.subscribe is not a function
      Saludos desde Perú

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

    eres god

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

    Hola leifer, muy buen video, la verdad me resolviste muchisimo la vida, pero no completamente la verdad ya que al momento de hacer el .push en el final mi ngfor no me devuelve nada, cree un boton que accionara un console.log de lo que es mi variable publica tipo array y a pesar de haber hecho push me devuelve un array vacio. Sabes que puede estar pasando?

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

      Hola claro con gusto te ayudo si puedes dejar captura o puedes compartir el código gist.github.com/ aquí para observar

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

      Hola amigo pudiste solucionar ese problema? Me esta pasando justo lo mismo

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

    Profe, de donde puedo descargar el css que usaste para el componente sidebar?

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

      Hola Sergio, aquí tienes el repo donde encontrarás todos los recursos.
      github.com/leifermendez/curso-angular-11
      Un saludo!

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

      @@LeiferMendez genial muchas gracias

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

    Hola buenas, tengo un problema la información la tengo en otra vista aparte entonces cuando le paso los parametros en un objeto al cambiar de vista con this.router.navigate(['otravista']); (todo eso en el mismo metodo), la primera vez que redirige no me llega el objeto, si le doy atras y otra vez pulso el boton para que lohaga todo si me llega.... a que se debe eso? como lo puedo solucionar?

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

      Tendrías un ejemplo en repositorio que pueda ver?

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

      @@LeiferMendez Hola muchas gracias por responder, podria subirlo a gitlab y pasartelo por algun correo si quieres

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

      @@fabricioreinozo2788 claro mi email está en la descripción

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

      Hola Federico , en algún momento me pasó lo mismo , la solución que encontré fue :
      Crear un servicio agregar propiedades públicas ( los datos que guardare temporal )
      Componente a , inyectar servicio y hacer setters a las propiedades que quiero guardar
      Componente b : inyecto mismo servicio , consultó referencia de la propiedad

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

      lo resolviste? necesito lo mismo porfavor

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

    Hola, una consulta, esto funciona con angular 9?, porque lo estoy intentando y no me funciona =(

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

      Hola Elizabeth, no lo tengo presente en angular 9 pero técnicamente debería funcionar.

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

    como haria esto sin servicios es posible?

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

    como se llama el theme que usa?...

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

      Hola Rodrigo no use ningún theme fue creado desde cero en el repositorio tienes todo el codigo

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

    me sale esto en consola "Form submission canceled because the form is not connected"

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

      Tienes algún repo en el que puedas compartir para ayudarte

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

    Gracias!