change_state.ts

import { Component, OnInit } from '@angular/core';
import StateService from '../services/state.service.ts';

@Component({
  selector: 'app-change-state',
  template: `
  <div>
    <div> {{username }} </div>
    <input [(ngModel)]="username" placeholder="enter username" />
    <button (click)="updateUsername()"></button>
  </div>
  `,
})

export class ChangeState implements OnInit {
  username: string;
  
  constructor(private state: StateService) { }

  ngOnInit() {
    this.state.username.subscribe(result => {
      this.username = result; // this set's the username to the default observable value
    });
  }

  updateUsername() {
    this.state.changeUsername(this.username);
  }
}