Comunicación entre componentes

Tipos de comunicación entre componentes:

• Padres a hijos con @Input.
• Hijos a padres con @Output.
• Mediante servicios.

Comunicación entre componentes padres a hijos con @Input

 
 

 

 

Vamos a pasar el nombre, el apellido y la dirección de una clase padre a una clase hijo usando el decorador @Input ().

Para ello creamos dos componentes llamados padre e hijo:

• ng generate component padre
• ng generate component hijo
  

En la plantilla principal del component hacemos que el padre sea hijo del componente principal de la aplicación:

app.component.html:

<app-padre></app-padre>

Definición del padre:

En la clase del componente padre creamos las variables nombre, apellido y dirección con sus correspondientes valores.

padre.component.ts:

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

@Component({

  selector: 'app-padre',

  templateUrl: './padre.component.html',

  styleUrls: ['./padre.component.css']

})

export class PadreComponent implements OnInit {

    nombre = 'Juan';

    apellido = 'Garcia';

    direccion = 'C/la oca';

  constructor() { }

  ngOnInit() {

  }

}

En la plantilla del componente padre vamos a vincular cada propiedad con los valores de las variables definidas en el modulo del componente.

padre.component.html:

<h1>Mi formulario</h1>  

<app-hijo

        [nombre]="this.nombre"

        [apellido]="this.apellido"   

        [direccion]="this.direccion"

> 

</app-hijo>

Definición del hijo:

Importamos el decorador Input, que está en "@angular/core":

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

Dentro del componente hijo en el decorador @Input, declaramos las propiedades definidas en la plantilla del padre.

hijo.component.ts:

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

@Component({

  selector: 'app-hijo',

  templateUrl: './hijo.component.html',

  styleUrls: ['./hijo.component.css']

})

export class HijoComponent implements OnInit {

  @Input() nombre: string;

  @Input() apellido: string;

  @Input() direccion: string;

  constructor() {

   }

  ngOnInit() {

  }

}

La plantilla del componente hijo: 

A traves del decorador @Input se renderizan los valores de la propiedad en la plantilla del del hijo.

<p>

    Nombre: {{nombre}}

    <br>

    Apellido: {{apellido}}

    <br>

    direccion: {{direccion}}

    <br>    

</p>

 

Comunicación entre componentes hijos a padres con @Output

 

 

Vamos a pasar un dato de una clase hijo a una clase padre mediante un evento.

Para ello creamos dos componentes llamados padre e hijo:

• ng generate component padre
• ng generate component hijo

El componente hijo va a generar un evento hacia el padre, para avisarle de un suceso.
El componente padre va a capturar el evento del hijo y lo va a renderizar.

 

Vamos a usar el decorador @Output () en el componente hijo que va emitir el evento hacia el padre donde vamos a usar una propiedad de EventEmitter.

Definición del hijo

hijo.component.ts:

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

@Component({

  selector: 'app-hijo',

  templateUrl: './hijo.component.html',

  styleUrls: ['./hijo.component.css']

})

export class HijoComponent implements OnInit {

  @Output () enviarPadre = new EventEmitter<string>();

  constructor() {

 

   }

  ngOnInit() {

  }

pulsar(value: string) {

  this.enviarPadre.emit(value);

}

}

hijo.component.html:

<button (click)="pulsar('Boton pulsado')">Pulsar</button>

 

Definicion del padre:

padre.component.ts:

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

@Component({

  selector: 'app-padre',

  templateUrl: './padre.component.html',

  styleUrls: ['./padre.component.css']

})

export class PadreComponent implements OnInit {

   valor: string;

   constructor() {

 

   }

  ngOnInit() {

   }

   mostrarDato(value: string) {

    this.valor = value;

   }

}

padre.component.html:

<p>Componente Padre</p>

<app-hijo (enviarPadre)= mostrarDato($event)></app-hijo>

<br>

{{this.valor}} 

Mediante servicios

Creamos un servicio utilizando el siguiente comando:

ng g service myservice

 

En el imports de app.module.ts:

•  Importamos el servicio

import { MyserviceService } from './myservice.service'

• Lo insertamos en el providers:

providers: [MyserviceService]

Dentro de MyserviceService:

myService.sevice.ts:

import { Injectable } from '@angular/core';

@Injectable({

  providedIn: 'root'

})

export class MyserviceService {

  nombre: string;

  constructor() { }

  setNombre(no: string) {

    this.nombre = no;

  }

  getNombre() {

    return this.nombre;

  }

}

 

Creamos un atributo llamado nombre con sus get y set correspondientes.

Después creamos dos componentes:

ng generate component uno

ng generate component dos

En cada componente inyectamos el servicio creado en el constructor 

miServicio: MyserviceService;

  constructor(mi: MyserviceService) {

    this.miServicio = mi;

  }

 

El componente uno le va a pasar el valor ‘Juan’ al método set del servicio y el  componente 2 lo va a obtener del método get del servicio y lo va a renderizar:

uno.component.ts:

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

import { MyserviceService } from '../myservice.service';

@Component({

  selector: 'app-uno',

  templateUrl: './uno.component.html',

  styleUrls: ['./uno.component.css']

})

 

export class UnoComponent implements OnInit {

  miServicio: MyserviceService;

  constructor(mi: MyserviceService) {

    this.miServicio = mi;

  }

  ngOnInit() {

    this.miServicio.setNombre('Pedro');

  }

}

dos.component.ts:

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

import { MyserviceService } from '../myservice.service';

@Component({

  selector: 'app-dos',

  templateUrl: './dos.component.html',

  styleUrls: ['./dos.component.css']

})

 

export class DosComponent implements OnInit {

  miServicio: MyserviceService;

  miNombre: string;

  constructor(mi: MyserviceService) {

    this.miServicio = mi;

  }

  ngOnInit() {

    this.miNombre = this.miServicio.getNombre();

  }

}

dos.component.html:

<p>{{this.miNombre}}</p>