title: Angular Behaviour Subject with Firestore
body: <p>Exceptionally new to BehaviourSubjects and not entirely sure if I've approached this the best way.</p>
  
  <p>I've created a service that queries Firestore. I've tried to create a BehaviourSubject based on the returned data so that I can use it in multiple components. What's the best way to make sure each component always get's the latest updated version?</p>
  
  <p>There are parts of my application where I'll update firestore with new values. When that happens, will it automatically sync through the service and into my components?</p>
  
  <p>Any examples of best practise or how to get this working in a good way would be hugely appreciated. Thanks! </p>
  
  <p><strong>Service</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Observable, BehaviorSubject } from 'rxjs';
  import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/firestore';
  
  @Injectable({
    providedIn: 'root'
  })
  export class SettingsService {
  
    private settingsDocRef: AngularFirestoreDocument&lt;any&gt;;
  
  
    settingsDocument = new BehaviorSubject(this.settingsDocRef);
    settings$: Observable&lt;any&gt; = this.settingsDocument.asObservable();
  
    constructor(private readonly afs: AngularFirestore) {
      this.settingsDocRef = this.afs.doc(`user_settings/useridishere`);
      this.settings$ = this.settingsDocRef.snapshotChanges();
      this.settings$.subscribe((value) =&gt; {
        const data = value.payload.data();
        this.settingsDocument.next(data);
      });
    }
  }
  </code></pre>
  
  <p><strong>Component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { SettingsService } from '../settings.service';
  import { Observable } from 'rxjs';
  
  @Component({
    selector: 'app-hello',
    templateUrl: './hello.component.html',
    styleUrls: ['./hello.component.css']
  })
  
  export class HelloComponent implements OnInit {
  
    issueName: string;
  
    // OR should this be an observable?
    // issueName: Observable&lt;string&gt;
  
  
    constructor(private settingsService: SettingsService ) {}
  
    ngOnInit() {
       this.settingsService.settings$.subscribe((settings) =&gt; {
        this.issueName = settings.usersetting_issuename;
      })
    }
  
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div&gt;
    {{ issueName }}
  &lt;/div&gt; 
  
  &lt;!-- OR if it's supposed to be an observable? --&gt;
  &lt;div&gt;
    {{ issueName | async }}
  &lt;/div&gt; 
  </code></pre>