title: Angular/angularfire2 - Read a document observable and save the data to an object. No async pipe
body: <p>I have been stuck on this problem for quite a while, and I am not sure how to solve it using the method I want.</p>
  <p>Basically, I have a collection called <code>pages</code> which contains all the page documents. I am interested in querying one of the pages. I want to read one of the documents as an observable, and using the NgModel directive, update the data in real-time. I think I have that part figured out: what I do not have is how to get the data from firebase without using the async pipe.</p>
  <p>When I subscribe to the data stream, I do not get the data object (values I can use right away), but the observable (I then have to use the async pipe in the <code>HTML</code> to view it). Is there a way I can subscribe to the data and populate some object with the data from firebase (basically do what the async pipe does in the component HTML, but without using the async pipe?).</p>
  <p>Below is the <code>page.service.ts</code> logic that is getting the data from firebase:</p>
  <pre><code>  /**
     *
     * @param workspaceId
     * @param pageId
     * GET A PAGE AS AN OBSERVABLE
     * SNAPSHOT CHANGES ALLOWS THIS TO BE WRITTEN TO IN REAL TIME
     */
    getWorkspacePage(workspaceId: string, pageId: string) {
      return this.afAuth.authState.pipe(
        map((user) =&gt; {
          if (user) {
            return this.fs.doc$(
              `users/${user.uid}/workspaces/${workspaceId}/pages/${pageId}`
            );
          } else {
            return {};
          }
        })
      );
    }
  </code></pre>
  <p>Below is the specific function, <code>doc$</code>:</p>
  <pre><code>  /**
     * GET THE DATA
     */
    doc$&lt;T&gt;(ref: DocumentPredicate&lt;T&gt;): Observable&lt;T&gt; {
      return this.doc(ref)
        .snapshotChanges()
        .pipe(
          map((doc) =&gt; {
            return doc.payload.data() as T;
          })
        );
    }
  </code></pre>
  <p>Here is the component <code>ts</code>:</p>
  <pre><code>currentPage: Page;
    @Input(&quot;currentPageId&quot;) currentPageId; // currentPageId
    @Input() workspace; // workspaceId
    sub: Subscription;
  
    ngOnInit() {
      // current page
      this.sub = this.pageService
        .getWorkspacePage(this.workspace.id, this.currentPageId)
        .subscribe((pageData) =&gt; {
          this.currentPage = pageData;
  
           // now what must be done to get pageData as an object and not as an observable?
  
        });
  </code></pre>
  <p>Thank you!</p>