Outputs – Angular 2+

Hola a todos, hoy os voy a explicar como funcionan los outputs en Angular2+.

Ya vimos el tema de los inputs, os dejo el manual por aquí:

https://www.discoduroderoer.es/inputs-angular-2/

Los outputs en angular sirven para comunicar el componente hijo con el componente padre, haciendo que lance un evento que el padre puede recoger.

Retomemos el ejemplo de los Inputs y vamos a agregarle la comunicación con el padre.

Lo que haremos sera modificar el child.component.

Vamos a añadirle lo siguiente:


@Output() returnMessage: EventEmitter<string>;

En el constructor, lo debemos crear:


 constructor() { 
   this.returnMessage = new EventEmitter<string>();
 }

En el HTML, vamos a crear un botón para añadir un evento que al pulsar emitamos un mensaje al padre:


<button (click)="llamarPadre($event)">Mandar mensaje al padre</button>

En el ts, creamos la función:


  llamarPadre($event){
    this.returnMessage.emit("Mensaje desde el hijo al padre del componente " + this.name);
  }

Así quedaría el componente:


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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  @Input() name: string;
  @Input() message: string;

  @Output() returnMessage: EventEmitter&amp;amp;amp;lt;string&amp;amp;amp;gt;;

  constructor() { 
    this.returnMessage = new EventEmitter&amp;amp;amp;lt;string&amp;amp;amp;gt;();
  }

  ngOnInit() {
  }

  llamarPadre($event){
    this.returnMessage.emit("Mensaje desde el hijo al padre del componente " + this.name);
  }

}

Ahora debemos hacer que el padre escuche al hijo, eso lo hacemos con (nombre_output) cuando hacemos la llamada de un componente.


   <app-child 
       [name]="nameComponent1" 
       [message]="messageComponent1" 
       (returnMessage)="recibirMensaje($event)"></app-child>

Asi se queda en el HTML. Crearos un atributo llamado mensajeHijo de tipo string en el ts.




<div>
  <h1>Padre</h1>

  <p>Mensaje recibido: {{mensajeHijo}}</p>

  <div>
    <h1>Hijo 1</h1>
    <app-child 
       [name]="nameComponent1" 
       [message]="messageComponent1" 
       (returnMessage)="recibirMensaje($event)"></app-child>
  </div>

  <div>
    <h1>Hijo 2</h1>
    <app-child 
       name="Hijo 2" 
       message="Este es el componente 2" 
       (returnMessage)="recibirMensaje($event)"></app-child>
  </div>


</div>



En el ts, vamos a crear la función que llamamos al recibir el evento:


recibirMensaje($event){
  this.mensajeHijo = $event;
}

Os dejo el ejemplo completo en stackblizt:

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.

Etiquetas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *