How do I access firestore data (displayed on HTML) from typescript

See more:

Javascript

Please I need help with accessing an HTML variable from typescript, (in this case, Prod.firstname). Prod.firstname is from my firestore data collection. 
 I had created a set of data in firestore from another page lets say page A prior to this current page(Page B), afterwards I displayed some of the data(prod.firstname) earlier created in firestore from page A on the html of (Page B),so what I intend doing now is to access the data that is displayed on the HTML of page B in the typescript of page B. the code shared above is the typescript code for Page A where I originally created a firestore data



I've been able to display the firestoredata on the HTML of page Bbut I want to access it in my typescript file so I can use it anywhere within the typescript. but I don't know how to go about it. I would really appreciate help from any one thanks.Im new in programming. here is my html code:

      <ion-card>
          <ion-card-header>
            <ion-card-title>
              First Name:
             </ion-card-title>
            </ion-card-header>
          <ion-card-content>
            <div *ngFor="let prod  of prodobs| async">
               <p>{{prod.firstname}}</p>
             </div>
           </ion-card-content>
         </ion-card> 

And here is the typescript code where i created the data in firebase firestore:

var prodobs = this.biocollection.doc(this.firstnameholder +""+ 
     this.lastnameholder+""+this.phonenumberholder).set({ firstname: 
     this.firstnameholder, lastname:this.lastnameholder, dateofbirth: 
     this.datetofbirthholder, phonenumber: this.phonenumberholder, }; 

What I have tried:

Firstname(){
consle.log(prod.firstname)}