title: Subscribe to Observable vs subscribe to Subject
body: <p>There are different methods to get data from server in Angular application:</p>
  
  <ol>
  <li>Get Observable from the service and subscribe to it at component</li>
  <li>Create Subject at the service and subscribe to the Subject at component</li>
  </ol>
  
  <p>Both of this methods work for me but I can't understand which should I use. </p>
  
  <p><strong>First method</strong>. <em>Get Observable from the service and subscribe to it at component</em>:</p>
  
  <p>article.service.ts</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Article } from '../models/article';
  import { AngularFirestore } from '@angular/fire/firestore';
  import { map, take } from 'rxjs/operators';
  import { Observable, Subject } from 'rxjs';
  
  @Injectable({
    providedIn: "root"
  })
  export class ArticleService {
    public articlesChanged: Subject&lt;Article[]&gt; = new Subject&lt;Article[]&gt;();
    articles: Article[];
  
    constructor(private db: AngularFirestore) {}
  
    get() {
      return this.db.collection('articles').valueChanges({ idField: 'id' });
    }
  }
  </code></pre>
  
  <p>home.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { ArticleService } from 'src/app/services/article.service';
  import { Observable, Subscription } from 'rxjs';
  import { Article } from 'src/app/models/article';
  
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
  })
  
  export class HomeComponent implements OnInit {
    articles: Article[];
  
    constructor(private articlesService: ArticleService) { }
  
    ngOnInit() {
      this.articlesService.get().subscribe(articles =&gt; this.articles = articles as Article[]);
    }
  }
  </code></pre>
  
  <p><strong>Second method.</strong> <em>Create Subject at the service and subscribe to the Subject at component:</em></p>
  
  <p>article.service.ts</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Article } from '../models/article';
  import { AngularFirestore } from '@angular/fire/firestore';
  import { map, take } from 'rxjs/operators';
  import { Observable, Subject } from 'rxjs';
  
  @Injectable({
    providedIn: "root"
  })
  export class ArticleService {
    public articlesChanged: Subject&lt;Article[]&gt; = new Subject&lt;Article[]&gt;();
    articles: Article[];
  
    constructor(private db: AngularFirestore) {}
  
    get(): void {
      this.db
        .collection('articles')
        .valueChanges({ idField: 'id' }).subscribe(articles =&gt; {
          this.articles = articles as Article[];
          this.articlesChanged.next(this.articles);
        });
    }
  }
  </code></pre>
  
  <p>home.component.ts</p>
  
  <pre><code>import { Component, OnInit, OnDestroy } from '@angular/core';
  import { ArticleService } from 'src/app/services/article.service';
  import { Observable, Subscription } from 'rxjs';
  import { Article } from 'src/app/models/article';
  
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
  })
  
  export class HomeComponent implements OnInit, OnDestroy {
    articlesSubscription: Subscription;
    articles: Article[];
  
    constructor(private articlesService: ArticleService) { }
  
    ngOnInit() {
      this.articlesSubscription = this.articlesService.articlesChanged.subscribe(articles =&gt; this.articles = articles);
      this.articlesService.get();
    }
  
    ngOnDestroy(): void {
      this.articlesSubscription.unsubscribe();
    }
  }
  </code></pre>
  
  <p>Is there a best practice which I should use? </p>