Uso de Outputs

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 ‘miOutput’ 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

esta es la ruta del avatar: https://www.w3schools.com/howto/img_avatar.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(‘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)
}

– OUTPUTS –

//Importar
import { Output, EventEmitter } from ‘@angular/core’;

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

imgLoaded() {
console.log(‘loaded’);
//Activar evento
this.loaded.emit();
}

Pasar información del hijo al padre.

Un ejemplo sobre como funciona Output: https://desarrolloweb.com/articulos/emision-eventos-output-angular.html