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.

Capítulo 3 - Componentes - Previous

3.2 Input

Next - Capítulo 3 - Componentes

3.4 Constructor

Last modified 3yr ago

Copy link