title: Sharing Strings between Angular Components
body: <p>I am trying to be able to reach out to my Firebase database to get settings that are stored and then set those variables in my AppComponent and then be able to retrieve that string from any other component that that the AppComponent is is imported with.</p>
  
  <p>I have this in my AppComponent (this retrieves the settings and set them individually and as a group. Let's take <code>company</code> as the variable we are trying to share.</p>
  
  <pre><code>export class AppComponent {
      public company: string;
      public title: string;
      public version: string;
      public show: boolean = false;
      public settings: Observable&lt;any&gt;;
  
      constructor(private dropConfig: NgbDropdownConfig, private router: Router, private db: AngularFireDatabase, public authService: AuthService, private afAuth: AngularFireAuth) {
          afAuth.authState.subscribe(user =&gt; {
              if(user) {
                  this.authService.findCompany().then((resp) =&gt; {
                      this.db.object(resp['company']+'/settings/users/'+user.uid+'/').valueChanges().subscribe((user) =&gt; {
                          this.company = resp['company'];
                          dropConfig.placement = 'bottom-right';
                          this.settings = db.object(this.company+'/settings/general').valueChanges();
                          this.settings.subscribe((setting) =&gt; {
                              this.title = setting.title;
                              this.version = setting.version;
                              this.show = true;
                          });
                      })
                  });
              } else {
                  this.show = false;
              }
          });
      }
  
      ngOnInit() {
  
      }
  }
  </code></pre>
  
  <p>From within my navbar component, just for example, I'm trying to import the AppComponent and then console.log out the company string.</p>
  
  <p>If I place this in my constructor:</p>
  
  <pre><code>constructor(public appComp: AppComponent) {
      console.log(this.appComp)
  }
  </code></pre>
  
  <p>This is what I get in my console: (in short for sake of simplicity)</p>
  
  <pre><code>AppComponent {company: "acme-industries"}
  </code></pre>
  
  <p>Now if I change the console.log to the following:</p>
  
  <pre><code>console.log(this.appComp.company)
  </code></pre>
  
  <p>This is what I get in the console.</p>
  
  <pre><code>undefined
  </code></pre>
  
  <p>What is the correct way to receive this information? It's available when I leave it at appComp but as soon as I try to get inside the array, it seems like all the information disappears.</p>
  
  <p><strong>UPDATE</strong> </p>
  
  <p>As per the comments made below, I created a service (to the best of my ability) that places all these settings inside an object and then attempts to return the object. The service is as below.</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { AngularFireAuth } from '@angular/fire/auth';
  import { AuthService } from '../auth/auth.service';
  import { AngularFireDatabase, AngularFireObject } from '@angular/fire/database';
  import * as firebase from 'firebase/app';
  import { Observable } from 'rxjs';
  import { tap, delay, map, first } from 'rxjs/operators';
  
  @Injectable({
      providedIn: 'root'
  })
  export class DefaultsService {
  
      public sets: Observable&lt;any&gt;;
      public settings = {
          "show" : false,
          "company" : null,
          "title" : null,
          "version" : null
      }
  
      constructor(private authService: AuthService, private afAuth: AngularFireAuth, private db: AngularFireDatabase) {
          this.afAuth.authState.subscribe(user =&gt; {
              if(user) {
                  this.authService.findCompany().then((resp) =&gt; {
                      this.sets = this.db.object(resp["company"]+'/settings/general').valueChanges();
                      this.sets.subscribe((response) =&gt; {
                          this.settings.show = true;
                          this.settings.company = resp["company"];
                          this.settings.title = response["title"];
                          this.settings.version = response["version"];
                      });
                  });
              }
          });
      }
  }
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Based on the update above, here is the <code>app.component</code> that would match.</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { AngularFireDatabase } from '@angular/fire/database';
  import { AngularFireAuth } from '@angular/fire/auth';
  import { AuthService } from './auth/auth.service';
  import { DefaultsService } from './defaults/defaults.service';
  import { Observable } from 'rxjs';
  import { NgbDropdownConfig } from '@ng-bootstrap/ng-bootstrap';
  import { filter, distinctUntilChanged, map, subscribeOn } from 'rxjs/operators';
  import { ActivatedRoute, Router, NavigationStart, NavigationEnd, PRIMARY_OUTLET } from '@angular/router';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
      title: string;
      version: string;
      show: boolean;
  
      constructor(private dfServices: DefaultsService, private dropConfig: NgbDropdownConfig, private router: Router, db: AngularFireDatabase, public authService: AuthService, private afAuth: AngularFireAuth) {
          afAuth.authState.subscribe(user =&gt; {
              if(user) {
                  console.log(dfServices.settings);
                  this.show = dfServices.settings.show;
                  this.title = dfServices.settings.title;
                  this.version = dfServices.settings.version
              }
          });
      }
  
      ngOnInit() {
      }
  }
  </code></pre>