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
Componentes
Todo lo que aprenderás sobre componentes y servicios en Angular
¿Qué son los componentes?
Uso de Inputs
Uso de Outputs
Componente para producto
Ciclo de vida de componentes
ngDestroy & SetInput
Lista de productos
Componentes y Header
Implementando el sideMenu
Comunicación padre e hijo
Servicios
Conociendo los servicios
¿Qué es la inyección de dependencias?
Obteniendo datos de una API
Pipes y Directives
Conociendo los pipes
Construyendo tu propio pipe
Conociendo las directivas
Best practices
Reactividad básica
Guia de estilos de Angular y linters
Despedida
Despedida
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Aportes 8
Preguntas 5
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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.