Share data between sibling components - Angular 2+

Angular 4SiblingShare datacomponents

In this article we will be discussing about sharing data between two different components. In my previous articles I have explained about different ways to share data between parent and child components. Now let us check in the case of sibling components.

Create a parent component first and then add other two components. Check below parent component.

Parent component

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

@Component({
    selector: 'app-root',
    template: '<div>'
        + '<home></home>'
        + '<dashboard></dashboard>'
        + '</div>',
})

export class AppComponent {
    constructor() { }
}

Here we have added two other components, which are not child or parent to each other. Now we need to share data from one component to another component. Before doing that let me share both component code below.

HomeComponent

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

@Component({
    selector: 'home',
    template: '<div><button (click)="shareData();">Share data</button>'
        + '</div>'
})

export class HomeComponent {
    constructor() { }
    shareData() {

    }
}

DashboardComponent

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

@Component({
    selector: 'dashboard',
    template: '<div>Dashboard</div>'
})

export class DashboardComponent {
    constructor() { }
}

On click of shareData() method, we need to share some data to DashboardComponent. Check below updated component.

Updated HomeComponent

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

@Component({
    selector: 'home',
    template: '<div><button (click)="shareData();">Share data</button>'
        + '</div>'
})

export class HomeComponent {

    @Output() shareDataEvent = new EventEmitter();

    _data: any[];

    constructor() {
        this._data = ['prashobh', 'angular', 'developer'];
    }
    shareData() {
        this.shareDataEvent.emit(this._data);
    }
}

We have added Output and EventEmittor to post the data.

Updated DashboardComponent

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

@Component({
    selector: 'dashboard',
    template: '<div>Dashboard</div>'
})

export class DashboardComponent {
    constructor() { }
    sendData(data: any[]) {
        console.log('I am from home component');
        console.log(data);
    }
}

Here we have added a method to receive data from other component. We are done for our components, now we need to update our parent component to pass the data.

Updated parent component

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

@Component({
    selector: 'app-root',
    template: '<div>'
        + '<home (shareDataEvent) = "dashboard.sendData($event)"></home>'
        + '<dashboard #dashboard></dashboard>'
        + '</div>',
})

export class AppComponent {
    constructor() { }
}

Here HomeComponent is emitting the data to parent and from parent it is sharing to DashboardComponent.

There are many other ways also there to share data between components. Check below articles for that.

1. Create reusable component and pass data to component.

2. Share data between components using service file.

3. Share data between parent and child component.

4. 3 simple ways to share data through angular route.

5. Share data between components using ViewChild.

6. How to communicate between a component and a service file.

We are done. In this article we have discussed about sharing data between two sibling components in Angular.

Angular 4SiblingShare datacomponents