Angular RxJS BehaviorSubject

app.component.ts

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

@Component({
  selector: 'app-root',
  template: `
    <app-parent></app-parent>
    <app-unrelated></app-unrelated>
  `,
  styles: []
})
export class AppComponent {}

app.module.ts

  
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { ParentComponent } from './components/parent/parent.component';
import { SiblingComponent } from './components/sibling/sibling.component';
import { UnrelatedComponent } from './components/unrelated/unrelated.component';
import { SharedService } from './services/shared.service';

@NgModule({
  declarations: [
    AppComponent,
    ParentComponent,
    SiblingComponent,
    UnrelatedComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [SharedService],
  bootstrap: [AppComponent]
})
export class AppModule { }

parent.component.ts

import { Component, OnInit } from '@angular/core';
import { SharedService } from '../../services/shared.service';

@Component({
  selector: 'app-parent',
  template: `
    <h1>Parent Component</h1>
    <p>{{ message }}</p>
    <app-sibling></app-sibling>
  `,
  styles: []
})
export class ParentComponent implements OnInit {
  message: string;

  constructor(private sharedService: SharedService) {}

  ngOnInit() {
    this.sharedService.currentMessage$.subscribe(message => (this.message = message));
  }
}

shared.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class SharedService {
  private messageSource = new BehaviorSubject('default message');
  currentMessage$ = this.messageSource.asObservable();

  constructor() {}

  changeMessage(message: string) {
    this.messageSource.next(message);
  }
}

sibling.component.ts

import { Component, OnInit } from '@angular/core';
import { SharedService } from '../../services/shared.service';

@Component({
  selector: 'app-sibling',
  template: `
    <h1>Sibling Component</h1>
    <p>{{ message }}</p>
    <input type="text" (keyup)="onTextChange($event.target.value)">
  `,
  styles: []
})
export class SiblingComponent implements OnInit {
  message: string;

  constructor(private sharedService: SharedService) {}

  ngOnInit() {
    this.sharedService.currentMessage$.subscribe(message => (this.message = message));
  }

  onTextChange(newMessage) {
    this.sharedService.changeMessage(newMessage);
  }
}

unrelated.component.ts

import { Component, OnInit } from '@angular/core';
import { SharedService } from '../../services/shared.service';

@Component({
  selector: 'app-unrelated',
  template: `
    <h2>Unrelated Component</h2>
    <p>{{ selectedValue }}</p>
    <select [ngModel]="selectedValue" (ngModelChange)="onModelChange($event)">
      <option>First option</option>
      <option>Second option</option>
    </select>
  `,
  styles: []
})
export class UnrelatedComponent implements OnInit {
  selectedValue: string;

  constructor(private sharedService: SharedService) {}

  ngOnInit() {
    this.sharedService.currentMessage$.subscribe(message => (this.selectedValue = message));
  }

  onModelChange(selectedOption) {
    this.sharedService.changeMessage(selectedOption);
  }
}