Input y Output en Angular 2

Hoy vamos a ver como trabajar con Input y Output en Angular 2 para la interacción entre componentes.

Los inputs nos permiten pasar valores desde el componente «padre» que utiliza dentro del el otro componente y así intercambiar datos entre estos dos componentes. Veamos un ejemplo para entenderlo mejor.

Tenemos un componente mi-formulario.component.ts que utiliza otro componente pueblo.component.ts. Desde el componente MiFormularioComponent vamos a pasarle las propiedades ciudad y pais al componente PuebloComponent.

import {Component} from '@angular/core';
import {PuebloComponent} from './pueblo.component';


@Component({
	selector: 'mi-formulario',
	templateUrl: 'app/views/mi-formulario.component.html',
	directives: [PuebloComponent]
})

export class MiFormularioComponent {
	public ciudad:string = "Milano";
	public pais:string = "Italia";

	showPueblo(event):void{
		alert(event.nombre);
	}

}

En la plantilla del componente mi-formulario estoy usando la etiqueta del componente pueblo y le estoy pasando las dos propiedades.

<h1>Mi formulario</h1>

<pueblo [ciudad]="ciudad"
        [pais]="pais"></pueblo>

? Antes de seguir entra a ver esto ? una sorpresa

Ahora utilizando el decorador @Input recibo los datos desde el otro componente y ya los puedo usar en la plantilla del componente

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

@Component({
  selector: 'pueblo',
  template: `
    <hr/>
    <h3>{{nombre}}</h3>
    <p>Ciudad: {{ciudad}}</p>
    <p>Pais: {{nacionReal}}</p>
    <button (click)="lanzar($event)">Lanzar alert</button>
  `
})

export class PuebloComponent {
// Guardamos los datos que nos pasa el componente padre
  @Input() ciudad: string;
  @Input('pais') nacionReal: string;
 
  public nombre:string;

  constructor(){
  	this.nombre = "Pueblo de la Toscana";	
  }

}

Con esto ya sabemos usar los input en Angular 2 para interactuar y pasar datos entre componentes.

¿No te ha quedado claro? Mira este vídeo:

También podemos pasarle datos del componente «hijo» al componente padre que lo utiliza con Output.

// Utilizamos los componentes EventEmitter y Output
import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'pueblo',
  template: `
    <hr/>
    <h3>{{nombre}}</h3>
    <p>Ciudad: {{ciudad}}</p>
    <p>Pais: {{nacionReal}}</p>
    <button (click)="lanzar($event)">Lanzar alert</button>
  `
})

export class PuebloComponent {
  @Input() ciudad: string;
  @Input('pais') nacionReal: string;
 
  // Usamos el decorador Output
  @Output() PasameElPueblo = new EventEmitter();

  public nombre:string;

  constructor(){
  	this.nombre = "Pueblo de la Toscana";
  	
  }

  // Cuando se lance el evento click en la plantilla llamaremos a este método
  lanzar(event){
                // Usamos el método emit
		this.PasameElPueblo.emit({nombre: this.nombre});
  }


}

En la plantilla del componente mi-formulario usamos el componente pueblo recibimos el evento PasameElPueblo y lanzamos el método showPueblo del componente padre.

<h1>Mi formulario</h1>

<pueblo [ciudad]="ciudad"
        [pais]="pais"
        (PasameElPueblo)="showPueblo($event)"></pueblo>

Aquí definimos el método showPueblo y lanzamos un alert con el valor que nos pasa el componente PuebloComponent. Podríamos trabajar con ese dato en este componente como mas nos convenga.

import {Component} from '@angular/core';
import {PuebloComponent} from './pueblo.component';


@Component({
	selector: 'mi-formulario',
	templateUrl: 'app/views/mi-formulario.component.html',
	directives: [PuebloComponent]
})

export class MiFormularioComponent {
	public ciudad:string = "Milano";
	public pais:string = "Italia";

	showPueblo(event):void{
		alert(event.nombre);
	}

}

Con esto ya sabemos utilizar input y output en Angular 2 para la interacción entre componentes.

Víctor Robles WEB

Autor: Victor

Desarrollador web - Formador online - Blogger

Compartir este post

5 Comentarios

  1. Hola Victor, te hago una consulta. Desde el componente padre le paso un objeto (item seleccionado de una lista) y lo recibo correctamente en el componente padre (formulario) pero al modificarlo, me actualiza el listado del padre, cosa que no quiero que pase hasta que presione el submit del formulario. Como seria en este caso?

    Gracias

    Responder
    • Recorda que un objeto json es pasado por referencia, Podrías clonar el objeto y hacer eso en el evento click o submit del boton de tu componente hijo, yo suelo clonar los objetos asi let temp:any = JSON.parse(JSON.stringify(_item)); eso me da una copia exacta del objeto y lo que puedes hacer es modificar la copia y si todo esta bien en el evento de tu preferencia del botón asignar al valor por referencia la copia y vuala.

      No se si ya lo habrás resuelto de otra forma pero eso me facilita inmensamente la codificación.

      Responder
  2. Saludos Victor, muchas gracias por tu contenido de Angular 2 en español, a sido de gran ayuda ya que no soy muy diestro con el ingles

    Responder
  3. Hola Victor, muchas gracias por compartir tus conocimientos con nosotros, ¿esto sería igual en Angular 5?

    Responder
    • Si, es igual 🙂

      Responder

Poner un comentario

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