title: Data gone after changing route
body: <p>My data is gone after changing route.</p>
  
  <p>Scenario:</p>
  
  <p>CommentComponent (Data shown) -> ChangeRoute -> CommentComponent (No data shown)</p>
  
  <p>The data only shown at the first load, but then it's gone whenever I change the route.</p>
  
  <p>I found this question looks similar with my case/issue:
  <a href="https://stackoverflow.com/questions/47395598/no-data-for-firestore-after-use-of-routerlink">No data for FireStore after use of routerlink</a></p>
  
  <p>But none of the comments/answer is helpful. So I decided to make this question.</p>
  
  <p>COMPONENT.HTML: <code>comment.component.html</code>:</p>
  
  <pre><code>&lt;ng-template #noComments&gt;
    &lt;h1&gt;No comment yet.&lt;/h1&gt;
  &lt;/ng-template&gt;
  &lt;div *ngIf="comments?.length &gt; 0; else noComments"&gt;
    &lt;h1 style="margin-bottom: 3.5vh;"&gt;Comments&lt;/h1&gt;
    &lt;ul *ngFor="let comment of comments"&gt;
        &lt;li&gt;
          &lt;mat-card&gt;
            &lt;h3&gt;{{comment.name}}&lt;/h3&gt;
            &lt;p&gt;{{comment.comment}}&lt;/p&gt;
          &lt;/mat-card&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>COMPONENT.TypeScript: <code>comment.component.ts</code>:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
  import { Observable } from 'rxjs/Observable';
  
  import { CommentService } from '../services/comment.service';
  import { Comment } from '../models/comment';
  
  @Component({
    selector: 'app-comment',
    templateUrl: './comment.component.html',
    styleUrls: ['./comment.component.css']
  })
  export class CommentComponent implements OnInit {
  
    comments: Comment[];
  
    constructor(private commentService: CommentService) {
    }
  
    ngOnInit() {
      this.commentService.getComments().subscribe(comments =&gt; {
        this.comments = comments;
      });
    }
  
  }
  </code></pre>
  
  <p>SERVICE: <code>comments.service.ts</code>:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Comment } from '../models/comment';
  
  import { Observable } from 'rxjs/observable';
  import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
  
  @Injectable()
  export class CommentService {
  
    commentsCollection: AngularFirestoreCollection&lt;Comment&gt;;
    comments: Observable&lt;Comment[]&gt;;
  
    constructor(public afs: AngularFirestore) {
      this.commentsCollection = this.afs.collection('comments');
      this.comments = this.commentsCollection.valueChanges();
    }
  
    getComments() {
      return this.comments;
    }
  
  }
  </code></pre>
  
  <p>MODEL: <code>comments.ts</code>:</p>
  
  <pre><code>export interface Comment {
      name: string;
      comment: string;
  }
  </code></pre>
  
  <p>[SOLVED]</p>
  
  <p>Here's how:</p>
  
  <p>In <code>comment.service.ts</code>, do something from:</p>
  
  <pre><code>  constructor(public afs: AngularFirestore) {
      this.commentsCollection = this.afs.collection('comments');
      this.comments = this.commentsCollection.valueChanges();
    }
  
    getComments() {
      return this.comments;
    }
  </code></pre>
  
  <p>To this:</p>
  
  <pre><code>  constructor(public afs: AngularFirestore) {
    }
  
    getComments() {
      this.commentsCollection = this.afs.collection('comments');
      return this.comments = this.commentsCollection.valueChanges();
    }
  </code></pre>