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>

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.

También podemos pasarle datos del componente “hijo” al componente 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.

Victor

Autor: Victor

Desarrollador web - Formador online - Blogger

Compartir este post

1 Comentario

  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

Poner un comentario

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