Capítulo 4 - Compilación
Capítulo 5 - NgModules
Capítulo 6 - Directivas
Capítulo 7 - Componentes Avanzados
Capítulo 8 - Router
Capítulo 9 - Inyección de Dependencias
Capítulo 10 - LifeCycle
Capítulo 11 - Pipes
Capitulo 12 - HTTP
Capítulo 13 - UI AngularMaterial \/ PrimeNG
Final
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.
Copy link