Communication between Sibling components in Angular

Communication or data exchange between component is pretty common scenario in angular development. We know the property binding and event binding can be implemented for hierarchical communication, i.e to pass data from parent to child component and vice versa. We can implement common service scenario when there is need to communicate among sibling components.

Now, the question is can we implement same solution for parent child communication? The answer is yes, we can because service in angular is singleton in nature. So, it is single source of truth.

Now, let’s implement common service scenario as example.

Step 1) Create multiple component and subscribe common service in target component

Here is example code for that. We will create “SharedService” shortly. Here is code for “Work1” component.

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

import { SharedService } from '../services/SharedService'

@Component({

  selector: 'work1',

  template: `

  <input type="text" name="txtName" [(ngModel)]="name">

  <input type="button" name="Click" value="Click" (click)="refresh()">`

})

export class Work1 {

  name : string;

  constructor(private _sharedService: SharedService ){

  }

  refresh(){

    this._sharedService.publishData(this.name);

  }

}

Here the idea is, when user will click refresh, it will call one function in shared service. The function is responsible to push the data in an observable stream. As soon as service will push the data to stream, the subscriber of the stream will get notification.

Let’s create another component called “Work2”

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

import { SharedService } from '../services/SharedService'

@Component({

  selector: 'work2',

  template: `{{name}}`

})

export class Work2 {

  name : string;

  constructor(private _sharedService : SharedService){

    this._sharedService.name$.subscribe(

      data => {

          this.name = data;

      });

  }

}

Here, you can see that we are subscribing “name” observable in SharedService.  So, when there will be any change of “name” variable then the code within constructor should trigger.

Step2) Create common service.

Now, we will implement the common service which will function as mediator/event publisher in implementation.

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

import { Subject }    from 'rxjs/Subject';

@Injectable()

export class SharedService {

  private name = new Subject<string>(); 

  name$ = this.name.asObservable();

  publishData(data: string) {

    this.name.next(data);

  }

}

The pushData() function is responsible to push the current data to “name$” observable stream.

So, here is final output 

Work with service in Angular2

Conceptually service is independent snippet of code which contains certain functionality or business logic. In Angular2 service is nothing but class of typescript (If we use typescript) which we can inject to component or module.

Yes, we can inject service to both component and module level. In this example we will demonstrate same.

If you are new in Angular2 , I will recommend to go through my previous article to setup angular2 project in IDE.

Setup Angular2 in Visual Studio

So, let’s start to implement one simple service which will return list of Person Object.

Add app.dataService.ts file in app folder. Here is content of file.

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

export interface Person {

    name: string

}

@Injectable()

export class dataService{

   

    getPerson(): Person[]

    {

        return [

            { name: "Ram" },

            { name: "Syam" },

            { name: "Jodu" }

        ];

    }

}

Here Person interface is type which we are returning from getPerson() function. Please note that the @Injectable decorator is needed when we want to inject to some other unit of code.

Inject service to component

As we said, service can be injectable both to component and module. Here we will inject service to component. Here we have created PersonComponent where we are injecting service in provider section.

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

import {dataService ,Person } from './app.dataservice'

import {OnInit} from "@angular/core";

@Component({

    selector: 'person',

    template: `<ul>

    <li *ngFor="let p of _persons">{{p.name}}</li>

    </ul>`,

    providers: [dataService],

})

export class PersonComponent {

    public _persons: Person[];

    constructor(private _dataService: dataService)

    {

        this._persons = this._dataService.getPerson();

    }

}

In constructor we are consuming getPerson() function which populating _Person member. Now, let’s create a view to display the component. Here is our sample view.

<!DOCTYPE html>

<html>

<head lang="en">

    <base href="/">

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Polyfill(s) for older browsers -->

    <script src="node_modules/core-js/client/shim.min.js"></script>

   

    <script src="node_modules/zone.js/dist/zone.js"></script>

    <script src="node_modules/reflect-metadata/Reflect.js"></script>

    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <!-- Configure SystemJS -->

    <script src="systemjs.config.js"></script>

   

    <script>

      System.import('app').catch(function(err){ console.error(err); });

    </script>

</head>

<body>

    <person>Loading App...</person>

</body>

</html>

Once we run the application ,we will see that data is showing like this.

Inject service in module

Now, let’s see how we can inject service to module. Here mainModule of application where we are injecting service in provider section.

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

import { BrowserModule } from '@angular/platform-browser';

import { PersonComponent } from './app.main_component';

import { dataService} from './app.dataservice';

@NgModule({

    imports: [BrowserModule ],

    declarations: [PersonComponent],

    bootstrap: [PersonComponent],

    providers: [dataService]

})

export class mainModule

{

};

Now, we can use the service in PersonComponent without inject it.

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

import {dataService, Person } from './app.dataservice'

import {OnInit} from "@angular/core";

@Component({

    selector: 'person',

    template: `<ul>

    <li *ngFor="let p of _persons">{{p.name}}</li>

    </ul>`

})

export class PersonComponent {

    public _persons: Person[];

    constructor(private _dataService: dataService) {

        this._persons = this._dataService.getPerson();

        console.log(JSON.stringify(this._persons));

    }

}