3.3 Output

Dentro de los componentes "Hijos" existen entradas (los inputs), y tambien existen eventos de salida, que al pasar algo, el componente hijo, le enviara datos al componente "Padre".

Para hacer esto vamos a hablar de los Outputs, estos outputs son "EventEmmiter" que van a ejecutar una funcion del componente "padre" para enviarle un dato al mismo, tal y como hablamos en los Inputs, los parametros que pasemos, pueden pasar desde un any hasta un objeto.

Vamos a ver como funciona, para entender un mejor

Componente Hijo:

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
    selector : 'output-component',
    template:`
            <span (click)="me()">Click ME<span>
    `
})
export class OutputComponent{

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

    me():void{
        this.ouputEmiter.emit("Hey te estoy enviando un msj");
    }   
}    

Componente Padre:

Import { Component } from '@angular/core';
@Component({
    selector:'padre-component',
    template:`
        <output-component (ouputEmiter)="ouputEmiter($event)"></output-component>
    `
})
export class PadreComponent{

    ouputEmiter(miVar:string){
        console.log("el valor que vino es: ", miVar);
    }

}   

Entonces para recapitular, cuando creas un "Output" lo que vas a generar es un event emitter que lo que hace es enviar un valor del hijo al padre... Recuerda que este valor puede ser desde un string , un any, hasta un objeto completo.