ngModel updating shared service state with BehaviorSubject

obs.service.ts

import { BehaviorSubject } from 'rxjs/BehaviorSubject';

export class ObsService {

  private val$:BehaviorSubject<number> = new BehaviorSubject(42);

  val = this.val$.asObservable();

}

one.component.ts

import { Component, OnInit } from '@angular/core';
import { ObsService } from './obs.service';

@Component({
  selector: 'app-one',
  template: `
  <h4>Component One</h4>
  <p>{{value}}</p>
  `,
  styles: [] 

})
export class OneComponent implements OnInit {

  constructor(private obsService: ObsService) {}

  value: number;

  ngOnInit() {
    this.obsService.val
      .subscribe(v => this.value = v, () => 'err');
  }

}

two.component.ts

import { Component, OnInit } from '@angular/core';
import { ObsService } from './obs.service';

@Component({
  selector: 'app-two',
  template: `
  <h4>Component Two</h4>
  <p>{{value}}</p>
  <input [ngModel]="obsService.val$ | async" (ngModelChange)="obsService.val$.next($event)" />
  `,
  styles: [] 

})
export class TwoComponent implements OnInit {

  constructor(private obsService: ObsService) {}

  value: number;

  ngOnInit() {
    this.obsService.val
      .subscribe(v => this.value = v);
  }
}