title: Angular 6 RxJs: Trying to make an obj as observable to be use in other components
body: <h1>Service</h1>
  
  <pre><code>mode: Subject&lt;any&gt; = new Subject&lt;any&gt;();
  
  constructor(public http: HttpClient) {
      this.setMode({ // defaults
          admin: this.admins.includes(localStorage.getItem("email")),
          edit: false,
          dev: false
      });
  }
  
  getMode() {
      return this.mode.asObservable();
  }
  
  setMode(value) {
      this.mode.next(value);
  }
  </code></pre>
  
  <h2>Component</h2>
  
  <pre><code>constructor(private bcAuthService: BcAuthService) {}
  
  ngOnInit() {
    this.bcAuthService.getMode().subscribe(mode =&gt; {
      console.log('mode: ', mode); // never logs or prints in the template
      this.mode = mode;
    });
  }
  editToggle(e) {
    this.mode.edit = e.target.checked; // err: cant edit `mode` because it never set.
    this.bcAuthService.mode.next(this.mode);
  }
  </code></pre>
  
  <h2>Question</h2>
  
  <p>I am trying to set up an Observable to be read and wrote from many components. As seen above; I set up the observable in my service but my component <code>getMode()</code> doesnt work. Any ideas why?</p>