Shared Service with BehaviorSubject

<!doctype html>

<html>

<head>
  <script src="./lib/main.ts"></script>
</head>

<body>
  <my-app>
    loading...
  </my-app>
</body>

</html>

//our root app component
import { Component, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { OneComponent } from './one';
import { TwoComponent } from './two';
import { DataService } from './data-service';

@Component({
    selector: 'my-app',
    template: `
      
        <one></one>
        <two></two>
    `,
})
export class App {
    name: string;
    constructor() {
        this.name = `Bla! v${VERSION.full}`;
    }
}

@NgModule({
    imports: [BrowserModule],
    declarations: [App, OneComponent, TwoComponent],
    bootstrap: [App],
    providers:[DataService]
})
export class AppModule {}

// Shim the environment
import 'core-js/client/shim';

// Angular requires Zones to be pre-configured in the environment
import 'zone.js/dist/zone';

//main entry point
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app';

import './style.css';

platformBrowserDynamic().bootstrapModule(AppModule);

h1,
p {
    font-family: sans-serif;
}

import { Component, OnInit, Injector, Inject } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DataService } from './data-service';

@Component({
    selector: 'one',
    template: `
        <h1>Component One</h1>
        <p>{{message}}</p>
        <button (click)="otherMessage()">New Message</button>

    `,
})
export class OneComponent {
  message: string;

  constructor(@Inject(DataService) private dataService){
  }

  ngOnInit() {
  //subscribe in the component to the current message
   this.dataService.currentMessage.subscribe( message => {
   this.message = message;
   })
  }
  
  otherMessage(){
    this.dataService.updateMessage("Hello from component one");
  }


}

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

@Injectable({
  providedIn: 'root'
})

export class DataService {
 private messageStream = new BehaviorSubject<string>('default value of message');
 currentMessage = this.messageStream.asObservable()
 constructor(){}

 updateMessage(newMessage: string){
   this.messageStream.next(newMessage);

 }

}

import { Component, OnInit, Injector, Inject } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DataService } from './data-service';


@Component({
    selector: 'two',
    template: `
        <h1>Component One</h1>
        <p>{{message}}</p>
        <button (click)="otherMessage()">New Message</button>

    `,
})
export class TwoComponent {
  message: string;
  constructor(@Inject(DataService) private dataService){}

 ngOnInit() {
  //subscribe in the component to the current message
   this.dataService.currentMessage.subscribe( message => {
   this.message = message;
   })
 }

 otherMessage(){
   this.dataService.updateMessage("Hello from component two")

  }

}

{
    "name": "@plnkr/starter-angular",
    "version": "1.0.3",
    "description": "Angular starter template",
    "dependencies": {
        "@angular/common": "^6.0.9",
        "@angular/compiler": "^6.0.9",
        "@angular/core": "^6.0.9",
        "@angular/platform-browser": "^6.0.9",
        "@angular/platform-browser-dynamic": "^6.0.9",
        "core-js": "^2.5.5",
        "rxjs": "^6.1.0",
        "zone.js": "^0.8.26"
    },
    "main": "./lib/main.ts",
    "plnkr": {
        "runtime": "system",
        "useHotReload": true
    }
}

{
    "compilerOptions": {
        "experimentalDecorators": true
    }
}