A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Uso de Outputs

4/20
Recursos

Aportes 8

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Con el evento de error ya no es necesario poner ng-template pues si detecta el evento del error se lanza el metodo de imgError() y se carga la imageDefault

El decorador @Output nos permite enviar informaci贸n desde el componente hijo en direcci贸n al componente padre por medio de un Event Emitter, para declarar un output lo hacemos de la siguiente manera:

@Output miOutput = new EventEmitter();

Si ademas queremos tipear este output para ser mas especificos con la informaci贸n que vamos a enviar entonces declaramos:

@Output miOutput = new EventEmitter<string>();

Lo siguiente es emitir esa informaci贸n desde el componente hijo por medio de la funci贸n emit() de nuestro EventEmitter declarado, en este caso 鈥榤iOutput鈥 por lo cual emitimos la informaci贸n de la forma siguiente:

this.miOutput.emit('mi string proveniente desde componente hijo')

Para recibir esa informaci贸n desde el componente padre utilizamos el event binding dentro del tag del componente hijo y hacemos referencia al nombre del event emitter del componente hijo, ejemplo:

<componente-hijo (miOutput)="funcionQueRecibeElOutput($event)" ></componente-hijo>

En el componente padre tendremos que recibir la informaci贸n por medio de una funci贸n, en este caso es funcionQueRecibeElOutput($event) donde 鈥$event鈥 es la informaci贸n que emite el componente hijo, y esta funci贸n se encargara de procesar la informaci贸n que le llegue desde el event emitter

Aqui hay una imagen default

https://www.m2crowd.com/core/i/placeholder.png

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(鈥榣og hijo鈥)
this.loaded.emit(鈥榚jemplo 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)=鈥渋mgLoaded()鈥 (error)=鈥渋mgError()鈥 [src]=鈥渋mg鈥 *ngIf=鈥渋mg; else elseImg鈥>
En el componente padre lo recibimos:
<app-img (loaded)=鈥渙nLoaded($event)鈥 [img]=鈥渋mgParent鈥></app-img>
Ese evento loaded tambien es nativo de img, por convencion se utiliza $ para eventos:
onLoaded(img: string){
console.log(鈥榣og padre鈥, img)
}

鈥 OUTPUTS 鈥

//Importar
import { Output, EventEmitter } from 鈥楡angular/core鈥;

//Crear evento
@Output() loaded = new EventEmitter();

imgLoaded() {
console.log(鈥榣oaded鈥);
//Activar evento
this.loaded.emit();
}

Pasar informaci贸n del hijo al padre.

muy bueno el evento (error), me ser谩 muy 煤til de ahora en m谩s 馃挭馃徑