Share data between sibling components using EventEmitter in Angular Framework

In Angular Framework, Components can communicate with each other. Sharing of the data with another component by passing data or events is known as communication of components. While developing an Angular application, a situation may occur where you have to share data from one component to another component of your Angular application. Angular provides several techniques to achieve this. In this article, we will learn to Share data between sibling components using EventEmitter in Angular Framework.

I will directly jump to the implementation part. Here, I have created two components HeaderComponent and LayoutComponent. These components are siblings. They are not related to each other. So we will see the process to pass data from HeaderComponent to the LayoutComponent.

1st step: Let’s start implementing the HeaderComponent

header.component.ts

import { Component, OnInit } from '@angular/core';
import {HeaderService} from './header.service';

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

  constructor(private _headerService: HeaderService) {

  }

  ngOnInit() {
  }
    clickDisplay(){
        this._headerService.ButtonDisplay(true)
    }
}

header.component.html

<button class="primary" (click)="clickDisplay()">Click</button>

header.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class HeaderService {
  displayButton = new EventEmitter();
  button:boolean;

  constructor() { }

  ButtonDisplay(button:boolean)
  {
    this.button=button;
    this.displayButton.emit(this.button);
  }
}

Now, 2nd step: Let’s start implementing the LayoutComponent.

layout.component.ts

import { Component, OnInit } from '@angular/core';
import {HeaderService} from '../header/header.service';
@Component({
  selector: 'app-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.css']
})
export class LayoutComponent implements OnInit {
  displayButton:boolean;

  constructor(private _headerService:HeaderService) { }

  ngOnInit() {
    this._headerService.displayButton.subscribe((data)=>{
      this.displayButton=data;
      console.log("Value of the displayButton is:"+this.displayButton);
    })
  }

}

layout.component.html

<div class="primary" *ngIf="displayButton"></div>

Above technique uses to emit an event from a HeaderComponent to LayoutComponent using EmitEmitter(). The Layout component listens to the emitter using event binding, once fired from the Header Component it will bind the displayButton property from the emitter to the target Layout component.

Explanation of the above implementation

As the button is clicked from the HeaderComponent. It will invoke the clickButton()  function of the header.component.ts file. Further clickButton() function invokes the buttonDisplay() function of the HeaderService class. Inside the buttonDisplay()  function, displayButton proprty emits the button property value. This button property value can be received to those components which are subscribing it.

In the LayoutComponet, we can see inside the ngOnInit() function of the layout.component.ts file displayButton property is subscribed and displayButton property of the LayoutComponent can store the emitted value. we can use this received value further in Layout component.

That’s all from my side about how to Share data between sibling components using EventEmitter in Angular framework. Happy Learning!