Angular – Comunicación entre componentes hermanos (Sibling component communication)

Hola buenas a todos, hoy les comparto un pequeño tutorial para poder comunicar dos componentes hermanos en Angular.

Angular Sibling Components (Componentes hermanos en ANgular)

Siempre llega un momento en el cual tenemos que enviar datos de un componente hacia otro que no esta relacionado de la forma Padre-Hijo, esa forma es mas sencilla, el tema se dificulta cuando es entre hermanos (Sibling Component). Como no hay una forma de enviar datos usando @Input o @Output por que no hay algo que los una directamente. En estos casos hay una forma bastante rápida, no es la única, pero es la forma que me funciono bastante bien.

Lo que vamos a hacer es usar un servicio el cual va a ser usado como intermediario entre los componentes en los que queremos enviar datos o visualizar algo enviado desde uno a otro.

Lo primero que vamos a hacer es un servicio y registrarlo en el module correspondiente:

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

@Injectable()
export class IncrementService {
  
  contador : number = 0;
  
  constructor() { }

  public incrementValue(){
    console.log('Contador aumentando');
    this.contador++;
  }
}

Componente 1: este componente va a tener una función en la cual vamos a poder incrementar el valor y se va a ver reflejado en el componente 2

import { Component, OnInit } from '@angular/core';
import { IncrementService } from '../service/increment.service';

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

  constructor(private incrementService : IncrementService) { }

  ngOnInit() {
  }

  public incrementar(){
    console.log('metodo incrementar');
    this.incrementService.incrementValue();
  }
}

Componente 1 HTML

<p>
  componete1 works!
</p>
<hr>
<button (click)="incrementar()">Incrementar</button>

Component 2: este componente solo va a tener la instancia del servicio

import { Component, OnInit } from '@angular/core';
import { IncrementService } from '../service/increment.service';

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

  constructor(private incrementService : IncrementService) { }

  ngOnInit() {
  }

}

Component 2 Html

<p>
  componete2 works!
</p>
<hr>
{{incrementService.contador}}

Con esta forma muy simple podemos desde un componente incrementar un valor y ver reflejado ese incremento en el otro componente.

Mas claro lo pueden ver en ejecucion si clonan este proyecto que subi a github

https://github.com/jlopezjuy/sibling-component.git

Clonan el repositorio, instalan las dependencias usando: npm install o yarn install

luego ejecutan usando: ng serve

Y listo, a probar

Espero les sea de utilidad. Ojo es una solución simple, hay otras formas de hacerlo.

Te puede interesar este articulo: Angular 6 liberado.

Jlopezjujuy

administrator

THIS IS AN OPTIONAL

Related Post

• 6 julio, 2018
• BY Jlopezjujuy

0

5.83K Views

Angular – Configurar proxy – mas simple

Hola buenas a todos, en un articulo anterior vimos como hacer una configuración de proxy para que n

• 6 febrero, 2020
• BY Jlopezjujuy

0

3.005K Views

Instalar Angular 9

Angular es una herramienta muy poderosa que es usada por muchos desarrolladores a nivel mundial.

• 4 octubre, 2017
• BY Jlopezjujuy

2

3.033K Views

Usar JQuery con Angular2

Hola buenas a todos, hoy vamos a ver como poder usar JQuery en Angular2. Siempre, cuando hacemos