title: how to return Observables from firebase firebase function
body: <p>I have running my application perfectly with</p>
  <blockquote>
  <p>&quot;@angular/fire&quot;: &quot;^6.1.5&quot;,<br />
  &quot;firebase&quot;: &quot;^8.6.3&quot;,</p>
  </blockquote>
  <p>and it was like</p>
  <p>Service.ts</p>
  <pre><code>getUserEventSummary(userId) {
  this.firestore.collection(`/user/${userId}/event_summary`).doc('current').snapshotChanges().pipe(
        map(changes =&gt; changes.payload.data())
      );
  }
  </code></pre>
  <p>Component.ts</p>
  <pre><code>this.service.getUserEventSummary(this.userId).subscribe((res: any) =&gt; {
      this.values = res;
  }
  </code></pre>
  <p>And such code is all over the application.
  Now I have moved to the latest version of firebase that is</p>
  <blockquote>
  <p>&quot;firebase&quot;: &quot;^9.0.1&quot;,
  &quot;@angular/fire&quot;: &quot;^7.0.4&quot;,</p>
  </blockquote>
  <p>And new changes are</p>
  <p>service.ts</p>
  <pre><code>getUserEventSummary(userId) {
   return getDoc(doc(db, `user/${userId}/event_summary`, 'current'));
  }
  </code></pre>
  <p>And component.ts</p>
  <pre><code>this.service.getUserEventSummary(this.userId).subscribe((docSnap: any) =&gt; {
     if (docSnap.exists()) {
          this.values = docSnap.data();;
      }
   }
  </code></pre>
  <p>I need a method that returns the same behavior i.e. observables that this code returning promise.</p>
  <p>Moreover, snapshot changes are hard to implement on the service files.
  Please help me with a better approach than changing the code of components.</p>