Input y Output en Angular 2

Publicado en Nov 7, 2016

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.