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

[@LeiferMendez]

├ 𝙑𝙀𝙍 𝙏𝙊𝘿𝙊𝙎 ⮕ 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]

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]

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

[@LeiferMendez]

Un gusto que sea de tu ayuda 😎

[@Alexxis2233]

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

[@LeiferMendez]

Gracias Alexis! por formar parte de esta comunidad

[@KaliJS]

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

[@fraxd]

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.

[@Lucass-rama]

Salvaste mi proyecto de trabajo, te amo

[@pizarroarancibia]

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 ?

[@henrymartinez1055]

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?

[@franciscocarranza5033]

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?

[@DanielAlvarez-yh1yx]

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

[@LeiferMendez]

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

[@Andresh222]

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

[@LeiferMendez]

Hola Andrés, te dejo la playlist de testing. kzbin.info/www/bejne/e2LLdKCtnLNpobs

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

[@MYPECOV4Media]

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

[@zoe4800]

Muchas gracias, en verdad me ayudo, excelente contenido!

[@epaulgr]

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

[@mauriciogomez2456]

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

[@RomanPlayer18]

Muchas gracias, muy bien explicado

[@JonathanBarreto-JStickB]

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

[@R9chemotg]

Que theme utilizas para visual studio code

[@LeiferMendez]

Hola Edert uso el github theme

[@anybalverdi9238]

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

[@LeiferMendez]

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

[@anybalverdi9238]

@@LeiferMendez Gracias ! Ahora lo comprendi acabadamente !!

[@RaizaSGonzalez]

Esta información es de otro mundo! Gracias

[@cesaralo2111]

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]

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

[@sergiodeluca9062]

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

[@LeiferMendez]

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

[@sergiodeluca9062]

@@LeiferMendez genial muchas gracias

[@jimejimenta]

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

[@LeiferMendez]

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

[@giancarlo3974]

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

[@LeiferMendez]

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!

[@luisjesuscastano9639]

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

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

[@sofiavidea]

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]

¡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]

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

[@JuanManuelHerreraCarrera]

Que fácil se ve, mil gracias

[@LeiferMendez]

Gracias a ti por formar parte de esta comunidad!

[@JuanManuelHerreraCarrera]

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]

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

[@JuanManuelHerreraCarrera]

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

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

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.

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

[@bandicot635]

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

[@jeanmigueluzcateguigonzale4078]

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

[@yoifre1234]

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]

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

[@bandicot635]

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

[@ignacio1994ir]

información valiosa!

[@LeiferMendez]

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

[@fabricioreinozo2788]

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]

Tendrías un ejemplo en repositorio que pueda ver?

[@fabricioreinozo2788]

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

[@LeiferMendez]

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

[@octaviogomez846]

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]

lo resolviste? necesito lo mismo porfavor

[@cristianm.t6957]

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]

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

[@jimmyjavier7521]

Muchas Gracias, muy buena expliacion amigo!

[@LeiferMendez]

Gracias por ver. Estás comenzando en angular ?

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

[@octaviogomez846]

Interesante implementación

[@r4yb4]

como haria esto sin servicios es posible?

[@salinasgaby]

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

[@LeiferMendez]

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

[@JorgeGomez-vp2ry]

thanks

[@pattytituana2795]

Gracias!

[@LeiferMendez]

Gracias por ver ,

[@elilopez_3105]

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

[@LeiferMendez]

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

[@alvarobernabey2338]

grande

[@jeysusmeister24]

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]

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]

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

[@rodrigoch2291]

como se llama el theme que usa?...

[@LeiferMendez]

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

[@carlospaternina7173]

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]

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

[@korasimo9594]

eres god

[@LeiferMendez]

Youuu 👌

[@TheNordicRaven2077]

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

[@LeiferMendez]

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

[@TheNordicRaven2077]

@@LeiferMendez Sí, gracias ya lo mande

[@LeiferMendez]

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

[@TheNordicRaven2077]

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

[@martinrios1745]

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ú

[@dexcarlos2324]

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

[@LeiferMendez]

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

[@victorramirez784]

Gracias!!!