title: How do I properly initialize and assign a observable using angulafire2?
body: <p>I'm using Angular 6 and Rxjs 6.</p>
  
  <p>The following code will throw undefined at the <code>ListFormsComponent</code> over and over and over until the <code>Observable</code> is assigned by <code>getForms()</code> at which it will then display the data. The <code>getForms()</code> is called by the navigation service when attempting to navigate to <code>ListFormsComponent</code> page. </p>
  
  <p>FormService.ts</p>
  
  <pre><code>export class FormService {
  
    public forms$: Observable &lt;Array&lt;Form&gt;&gt; ;
    public assignedForms$: Observable &lt;Array&lt;Form&gt;&gt; ;
    public form$: Observable &lt;Form&gt;;
    constructor(
      private afs: AngularFirestore,
      private authService: AuthService,
    ) {}
  
    getForms() {
      let zippedData = zip(this.authService.user$);
      zippedData.subscribe(data =&gt; {
        this.forms$ = this.afs.collection('networks')
          .doc(data[0].activeNetworkProfile.id)
          .collection('companyProfiles')
          .doc(data[0].activeCompanyProfile.id)
          .collection&lt;Forms&gt;('inspectionForms')
          .valueChanges();
      })
    }
  
  }
  </code></pre>
  
  <p>ListFormsComponent.ts</p>
  
  <pre><code>export class ListFormsComponent implements OnInit {
    public forms: Forms[];
    constructor(private formService: FormService, private navigateService: NavigationService) {
  
      this.formService.forms$.subscribe(forms =&gt; { //&lt;---Error here this.formService.forms$ is undefined
        this.forms = forms;
        console.log("Forms inside component");
        console.log(this.forms);
      })
    }
  }
  </code></pre>
  
  <p>ListFormsComponent.html</p>
  
  <pre><code>&lt;mbsc-listview [options]="listSettings" style="display:none"&gt;
    &lt;mbsc-listview-item (click)="viewDetails(form.id)" *ngFor="let form of forms"&gt;
      &lt;h3 class="mbsc-lv-txt"&gt;{{form.name}}&lt;/h3&gt;
      &lt;p class="mbsc-lv-txt"&gt;{{form.lastEdited | date: 'medium'}} &lt;/p&gt;
    &lt;/mbsc-listview-item&gt;
  &lt;/mbsc-listview&gt;
  </code></pre>
  
  <p>NavigationService.ts</p>
  
  <pre><code>navigateForms() {
    this.formService.getForms();
    this.navigateService.navigate('forms');
  }
  </code></pre>
  
  <p>So I then decided to initialize the observable by doing the following code(see below) in the constructor of FormService.ts and it stops the errors but It does not trigger the subscription in the <code>ListFormsComponent.ts</code>. I'm assuming when <code>valueChanges()</code> returns the <code>Observable</code> to <code>forms$</code> it breaks rest of the <code>subscriptions</code>. </p>
  
  <pre><code>this.forms$ = new Observable&lt;Array&lt;Forms&gt;&gt;();
  </code></pre>