User a shared service between to two component in angular 4

       Communication between component siblings via a service       

1. app.module
===========

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

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

import { FormsModule } from '@angular/forms'; // <-- NgModel lives here

import { SharedService } from './services/shared.service';

import { AppComponent } from './app.component';

import { MastertoChildComponent} from './component/Mastertochild.component';

@NgModule({

declarations: [AppComponent,MastertoChildComponent],

imports: [BrowserModule,FormsModule,NgbModule.forRoot()],

providers: [SharedService],

bootstrap: [AppComponent]

})

export class AppModule { }

2. userinfo model
==============

export class user{

public id:number;

public name:string;

public pic:string;

}

3. app.services
==========

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

import { Subject } from 'rxjs/Subject';

import {user} from '../services/userinfo';

@Injectable()

export class SharedService {

// Observable string sources

private caseNumber = new Subject<string>();

// Observable string streams

caseNumber$ = this.caseNumber.asObservable();

// Service message commands

publishData(data: string) {

this.caseNumber.next(data);

}

// Observable user object sources

private getuserobj=new Subject<user>();

// Observable user object streams

getuserobj$=this.getuserobj.asObservable();

// Service changes object commands

publishuserobj(info:user)

{

this.getuserobj.next(info);

}

}

4.app.component
============

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

import { SharedService } from './services/shared.service';

import {user} from './services/userinfo';

@Component({

selector: 'app-root',

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

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

})

export class AppComponent

{

title = 'app';

data:string="Ng4App";

info:user=new user();

constructor(private _sharedService:SharedService){

this._sharedService.publishData(this.data);

this._sharedService.caseNumber$.subscribe( data => { this.data=data; });

this._sharedService.getuserobj$.subscribe(data=>this.info=data);

}

}

5.app.component.html
================

<div class="well well-sm">

<div class="container">

<div class="navbar-left">

<a data-toggle="tooltip" data-placement="bottom" title="Home!" routerLink="/" >
<img style="height: 42px;" src="/assets/img/iconlog.ico" />

{{data}} <span>|</span> {{info.id}}</a>

</div>

</div>

</div>

6.mastertochild.componet
===================

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

import { SharedService } from '../services/shared.service';

import {user} from '../services/userinfo';

@Component({

templateUrl: '../UI/MastertoChild.Component.html',

})

export class MastertoChildComponent {

info:user= new user();

constructor(private _sharedService:SharedService ){ }

onSubmit(): void {

//Get single string value using shared services

this._sharedService.publishData(this.info.name);

//Get object value using shared services

this._sharedService.publishuserobj(this.info);

}

}

7.mastertochild.componet.html
======================

<div class="well">

<div class="row">

<div class="col-sm-5">

<input type="text" class="form-control" [(ngModel)]="info.id">

</div>

<div class="col-sm-5">

<input type="text" class="form-control" [(ngModel)]="info.name">

</div>

<div class="col-sm-2">

<button type="submit" class="btn" (click)=onSubmit()>Submit</button>

</div>

</div>

</div>

This URL is also helping : https://embed.plnkr.co/P8xCEwSKgcOg07pwDrlO/