Comunicación de Eventos entre Componentes en Angular

Curso de Angular: Componentes y Servicios

Contenido del curso

Componentes

Servicios

Pipes y Directives

Best practices

Despedida

20
Componentes y Servicios en Aplicaciones Web
01:09 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0010:28

Comunicación de Eventos entre Componentes en Angular

Curso de Angular: Componentes y Servicios

Clase 4 de 20

Clase 4 / 20

Recursos

Luis Gerardo López Hernández

Hace 5 años

Creo que lo explico de forma muy complicada sobre todo con eso de strings e imagenes, lo que hizo es esto:

Para pasar información al padre necesitamos dos modulos Output y EventEmitter, lo haremos a traves de un evento creado por nosotros imgLoaded: import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; @Output() loaded = new EventEmitter<string>(); imgLoaded(){ console.log('log hijo') this.loaded.emit('ejemplo string del hijo a padre'); } Fijate como usa this.loaded.emit eso es lo que vamos a pasar del hijo al padre Aqui lo usamos, loaded es un evento nativo de img: <img width="200" (load)="imgLoaded()" (error)="imgError()" [src]="img" *ngIf="img; else elseImg"> En el componente padre lo recibimos: <app-img (loaded)="onLoaded($event)" [img]="imgParent"></app-img> Ese evento loaded tambien es nativo de img, por convencion se utiliza $ para eventos: onLoaded(img: string){ console.log('log padre', img) }

Jimmy Buriticá Londoño

Hace 5 años

Tu explicación esta bien, pero estaría mejor si el código fuente lo ubicas en cajas usando el botón </>.

Johann Raul Ortiz Paez

Hace 4 años

Creo que lo explico de forma muy complicada sobre todo con eso de strings e imagenes, lo que hizo es esto:

Para pasar información al padre necesitamos dos modulos Output y EventEmitter, lo haremos a traves de un evento creado por nosotros imgLoaded:

import { Component, OnInit, Input, Output, EventEmitter } from ‘@angular/core’;
@Output() loaded = new EventEmitter<string>();
imgLoaded(){
console.log(‘log hijo’)
this.loaded.emit(‘ejemplo string del hijo a padre’);
}

Fijate como usa this.loaded.emit eso es lo que vamos a pasar del hijo al padre Aqui lo usamos, loaded es un evento nativo de img:

<img width=“200” (load)=“imgLoaded()” (error)=“imgError()” [src]=“img” *ngIf=“img; else elseImg”>
En el componente padre lo recibimos:
<app-img (loaded)=“onLoaded($event)” [img]=“imgParent”></app-img>

Ese evento loaded tambien es nativo de img, por convencion se utiliza $ para eventos:

onLoaded(img: string){
console.log(‘log padre’, img)
}

Comentarios (38)38 comentarios

Vsqz Gabriel

Andres López

Ivan Hilario Pacheco

Obed Paz

Carlos Daniel Martinez Joya

Rony Porraz Vargas

Mateo Arias Correa

Edinson Colonia Paez

Aaron Paredes Cabrera

Marianella Rezendes

David Castro

Arukay Learning

Gabriel Mario Seno

moises mannarino

Héctor Eduardo López Carballo

Miguel Sierra

Miguel Angel Reyes Moreno

Carlos Dugarte

Cindy Melissa Velásquez Sánchez

Hace 4 meses

Martin Bohórquez Tuberquia

Daniel Meza

Jehú Frayle

Gonzalo Vidal

Ariel Emiliano Acevedo Posos

Daniela Stornelli

Javier Marin Ayza

Diego Fernando Caviedes Camaho

German Pinilla

Hace 3 años

Arturo Ulises Reyes Martínez

Componentes

Desarrollo de Tienda Online con Angular Avanzado

Creación y Gestión de Componentes en Angular

Comunicación de Componentes: Envío de Datos con Inputs en Angular

Comunicación de Eventos entre Componentes en Angular

Creación y Reutilización de Componentes en Angular para Tiendas

Ciclo de Vida de Componentes en Angular: Constructor a OnDestroy

Manejo de eventos y limpieza en Angular con ngOnDestroy y setters

Componentes en Angular: Creación y Organización de Productos

Estilos en Angular: Alcance y Maquetación de Componentes

Despliegue Dinámico de Menú Lateral en Angular

Comunicación Padre-Hijo con Inputs y Outputs en Angular

Servicios

Creación y uso de servicios en Angular para lógica de negocio

Inyección de Dependencias en Angular: Conceptos y Funcionamiento

Conexión a APIs usando HTTP Client Module en Angular

Pipes y Directives

Uso de Pipes en Angular: Transformación y Formatos

Creación de Pipes Personalizados en Angular

Creación y Uso de Directivas en Angular para Manipular el DOM

Best practices

Reactividad y Manejo de Estado en Angular con NGRX

Implementación de Linter en Angular para Buenas Prácticas de Código

Despedida

Componentes y Servicios en Aplicaciones Web

Comunicación de Eventos entre Componentes en Angular

Progreso del curso

Componentes

Servicios

Pipes y Directives

Best practices

Despedida

Recursos

Recursos