title: Have wasted all day and more trying to get Angular Observable to work
body: <p>Help! I have wasted all day and most of yesterday trying to get an observable to work in my Angular app. I have a component that is used to change the user settings/config for the app, and I want to be able to notify other components when the settings change. The more I read, the more confused I get. Here is my settings-container code:</p>
  
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  import {FormBuilder, FormGroup, Validators} from '@angular/forms';
  import { Observable } from 'rxjs';
  import { MatSelectModule, SELECT_ITEM_HEIGHT_EM } from     '@angular/material/select';
  
  
  import { AppSettings } from '../../shared/app-settings'
  import { AppSettingsService } from '../../services/app-settings.service';
  import { APPSETTINGS } from '../../shared/defaultSettings';
  import { ThemeService } from '../../services/theme.service';
  import { LogService } from 'src/app/services/app-log.service';
  
  @Component({
    selector: 'app-settings-container',
    templateUrl: './settings-container.component.html',
    styleUrls: ['./settings-container.component.scss']
  })
  export class SettingsContainerComponent implements OnInit {
    className: string;
  
    settings: AppSettings;
  
    @Input()
    defaultSettings = APPSETTINGS;
  
    themes = [
      { value: 'DEFAULT-THEME', label: 'blue' },
      { value: 'LIGHT-THEME', label: 'light' },
      { value: 'NATURE-THEME', label: 'nature' },
      { value: 'BLACK-THEME', label: 'dark' }
    ];
  
    wings = [
          { value: 'ALWG', label: 'Alabama Wing' },
          { value: 'WYWG', label: 'Wyoming Wing' },
    ];
  
    @Input()
    title: string;
  
    constructor(private appSettingsService: AppSettingsService,
                private logger: LogService,
                private themeService: ThemeService) { }
  
    ngOnInit() {  
      this.className = this.constructor.toString().match(/\w+/g)[1];
      this.settings = this.appSettingsService.getSettings();
    }
  
    saveSettings( event ) {
      this.logger.debug(this.className, 'saveSettings, settings:', this.settings);
      this.appSettingsService.saveSettings(this.settings);
  
    }
  
  }
  </code></pre>
  
  <p>This all works fine and all my callbacks (deleted for brevity) work fine. The settings service is short and sweet as shown below:</p>
  
  <pre><code>import { Input } from '@angular/core';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/observable/of';
  import { BehaviorSubject } from 'rxjs';
  import { AppSettings } from '../shared/app-settings';
  import { APPSETTINGS } from "../shared/defaultSettings";
  import { Inject, Injectable } from '@angular/core';
  import { LOCAL_STORAGE, StorageService } from 'angular-webstorage-service';
  import { LogService } from 'src/app/services/app-log.service';
  
  
  @Injectable()
  export class AppSettingsService {
  
    @Input()
    defaultSettings = APPSETTINGS;
    settings: Observable&lt;AppSettings&gt;;
    newSettings: AppSettings;
      // Use of BehavioirSubject. This is where you post values into
      private _settings$: BehaviorSubject&lt;AppSettings&gt; = new     BehaviorSubject(APPSETTINGS)
      // Settings observer. This is where you read from outside
      settings$: Observable&lt;AppSettings&gt; = this._settings$.asObservable();
  
      constructor(private logger: LogService,
                  @Inject(LOCAL_STORAGE) private storage: StorageService) {
         this.newSettings = this.storage.get('TRACS3_SETTINGS');
  
         if ( this.newSettings !== null ) {
             this._settings$.next(this.newSettings);
         } else {
                 this.storage.set('TRACS3_SETTINGS', APPSETTINGS);
             this.newSettings = this.storage.get( 'TRACS3_SETTINGS');
             console.log('about to change observable');
             this._settings$.next( this.newSettings );
             console.log('just changed observabe to ', this.newSettings);
         }
      }
      public saveSettings(settings: AppSettings): void{
        console.log('saving settings in service');
        //this._settings$.post(settings)
        this._settings$.next(settings);
        this.storage.set('TRACS3_SETTINGS', settings);
      }
  
  
    public getSettings(): Observable&lt;AppSettings&gt; {
      return this.storage.get('TRACS3_SETTINGS');
    }
  
  }
  </code></pre>
  
  <p>Settings are properly saved in local storage, and read at startup as they should. What I am trying to get to happen however, is notify my app.component when the settings change (navbar title is one of the settings). But I have been banging my head against the wall trying to figure out how to make that happen. Here is my app.component code:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { MatIconRegistry } from "@angular/material/icon";
  import { DomSanitizer } from "@angular/platform-browser";
  import { Inject } from '@angular/core';
  import { Observable } from 'rxjs';
  import { AdalService } from 'adal-angular4';
  import { environment } from '../environments/environment';
  
  import { AppSettings } from './shared/app-settings'
  import { AppSettingsService } from './services/app-settings.service';
  import { APPSETTINGS } from './shared/defaultSettings';
  import { LogService } from 'src/app/services/app-log.service';
  
  import {LOCAL_STORAGE, WebStorageService} from 'angular-webstorage-service';
  
  import { Aircraft } from "./shared/aircraft";
  import { Content } from '@angular/compiler/src/render3/r3_ast';
  import {TitleService } from './services/title.service';
  
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  
  export class AppComponent implements OnInit{
    className: string;
    aircraft: Aircraft[];
    isAuthenticated$:         Observable&lt;boolean&gt;;
    settings$: Observable&lt;AppSettings&gt;;
    newSettings: AppSettings;
    defaultSettings: AppSettings;
  
  
  
    constructor(
      private titleService: TitleService,
      public appSettingsService: AppSettingsService,
      private matIconRegistry: MatIconRegistry,
      private domSanitizer: DomSanitizer,
      private adalService: AdalService,      
      private logger: LogService,
      @Inject(LOCAL_STORAGE) private storage: WebStorageService
      ){
      this.settings$ = this.appSettingsService.getSettings();
      console.log('settings$: ', this.settings$);
      adalService.init(environment.config);
  
      this.matIconRegistry.addSvgIcon(
        "historical-tracking-black-48",
        this.domSanitizer.bypassSecurityTrustResourceUrl("../assets/historical-    tracking-black-48.svg")
  );
      this.matIconRegistry.addSvgIcon(
        "historical-tracking-black-48-inactive",
        this.domSanitizer.bypassSecurityTrustResourceUrl("../assets/historical-tracking-black-48-inactive.svg")
      );
      //this.appSettingsService.getSettings().subscribe(newSettings =&gt;     this.settings = newSettings);
    } 
  
    ngOnInit(){
      this.className = this.constructor.toString().match(/\w+/g)[1];
  
      this.adalService.handleWindowCallback();
      this.logger.debug(this.className, "adal userInfo: ",     this.adalService.userInfo);
  
          this.settings$ = new Observable(observer =&gt; {
            console.log('in observer');
          })
  
      let subscription = this.settings$.subscribe(
        newSettings =&gt; console.log('NewSettigns: ',newSettings),      
      )
      this.logger.log(this.className, "Settings at startup: ", this.settings);
  
      this.appSettingsService.getSettings().subscribe((newSettings) =&gt; {
        console.log('settings have changed, new settings are:', newSettings);
      })
    }
  
    login() {
      this.adalService.login();
    }
  
    logout() {
      this.adalService.logOut();
    }
  
    get authenticated(): boolean {
      return this.adalService.userInfo.authenticated;
    }
  
  }
  </code></pre>
  
  <p>I have authentication working (which I thought would be difficult- wasn't), but I can't for the life of me get an observable working which I thought was supposed to be simple. Problem is, there seem to be so many different ways of doing it, everything I continue to read just ends up confusing me. Could someone point me the right direction?</p>
  
  <p>Thanks....</p>