Managing Angular subscriptions
I think at the end it depends on the use case.
For a simple loading of data, i would use the approach of getting the Observable directly. 
When the backendcall is not anymore the single source of changes (for example when i could change the data in the frontend and persist it later), or when i want to "store" the data, so that i do not have to call the backend for each request, then i would start thinking about providing an extra observable.

But i would not make the "storage" public, because then others would be able to emit values on it. I would make it private and provide a method that gives access to the data.

// ...
private articles$ : BehaviorSubject&lt;Article[]&gt;([]);

public getArticles(): Observable&lt;Article[]&gt; {
   return this.articles$.pipe(
     distinctUntilChanged();
   )
}

public loadArticles(): void {
  this.db.collection('articles').valueChanges({ idField: 'id' })
  .subscribe( 
    (articles: Article[]) =&gt; this.articles.next(articles)
  );
}


In my experience i worked mostly with a direct connected backend call. Perhaps with a pipe to map the backend data format into my frontend data format, but thats it.
The other approach i use mostly when i want to implement a central data source.

By the way, i have the tendency to type the return types of my methods, so that the transpiler can provide me some support. :-)