Return firebase values from a service to a component angular 6

Question

I'm creating an application with angular 6 and firebase using angularfire2, I chose to use the firestore where I have a collection called pages like in the image:

basically I created a service - "PagesService" where I have a function that returns the data of the page that I sent. I'm trying to use getPage to return the values to my component, and assign them to the form, nothing else I tried worked, only returns an "observable" that I can not work, does anyone have an idea of what I can do?

Full code, service:

import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class PagesService {
  private pagesCollection: AngularFirestoreCollection<any>;
  private page: AngularFirestoreDocument<any>;

  constructor(private afs: AngularFirestore) {
    this.pagesCollection = afs.collection('pages');
  }

  getPage(pageName: string) {
    return this.afs.doc<any>('pages/${pageName}').valueChanges();
  }

  addPages(pageName: string, pageForm: any) {
    this.pagesCollection.doc(pageName).set(pageForm.value);
  }
}

My component:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Observable } from 'rxjs';

import { PagesService } from '../../services/pages.service';

@Component({
  selector: 'app-quem-somos',
  templateUrl: './quem-somos.component.html',
  styleUrls: ['./quem-somos.component.scss']
})
export class QuemSomosComponent implements OnInit {
  pageForm: FormGroup;
  pageName: string = "wo-we-are";
  page: any;

  constructor(private pagesService: PagesService, private fb: FormBuilder) { }

  ngOnInit() {
    this.page = this.pagesService.getPage(this.pageName);
    console.log(this.page);

    this.pageForm = this.fb.group({
      title: '',
      content: ''
    });
  }

  save() {
    this.pagesService.addPages(this.pageName, this.pageForm);
  }
}

obs: Sorry my english

Answer 1

If I have understand you right, When you say "Observable that I cannot work" is mean that you cannot access his data when you are trying to assign its values in the form?
In this case (I assume that your service is working as expected), just subscribe to it and populate the form after your values are ready to use. for example:

ngOnInit() {
  this.pagesService.getPage(this.pageName).subscribe(v => {
  // Here your data is ready, so you can send it to a function and populate the form as you need.
     this.populateForm(v);
  });

 // Here I just construct the FormGroup, so your application can rendered.
  this.pageForm = this.fb.group({
    title: '',
    content: ''
  });
}

And add this function to do the task:

populateForm = (data) => {
 console.log(data); // Just log it in console, and see if its the data that you seek for
}

Instead of console.log() you can populate your form or do what ever you need to.
Good Luck !

--EDIT--

I just noticed now, In your service:

  getPage(pageName: string) {
    return this.afs.doc<any>('pages/${pageName}').valueChanges();
  }

You call the doc with ' ' instead of ``, so In fact, you are not using Template Strings. So your call is wrong and not fetch with the right path.
Change it to:

return this.afs.doc<any>(`pages/${pageName}`).valueChanges();