How to get UID from an Angular fire store Document without snapshot

Question

let say I have a collection named Countries and a doc looks like below

{
  name: "Pakistan"
  //other field removed to focus on problem only
}

and a Collection names Cities which doc have above country field reference looks like

{
  name: "Karachi",
  //other field removed to focus on problem only
  city: "3FbRFiWB4DmfdcxDdei3" //reference of country document
}

now I am displaying the countries and cities as ordered drop down menus as user select country then the next drop down displays filtered cities

let countryRef = this.angularFireStore.collection('Countries', ref => ref);
let countries = countryRef.valueChanges();

and html binding looks like

let country of country | async"

Here is the actual problem on any change or select event of user I have to pass id of country to populated filtered cities based of selected country but I can't got id in country. How to achieve this any help will be greatly appreciated.

NOTE: I know I can got id and other metadata by getting snapshot change but that response very late I just want id field in reference binding for editing or updating Documents.

Answer 1

As you said you don't want to use .snapshotChanges() and get id with .valueChanges() you need to store it while creating the doc. Do this in your add country function

this.tempId = this.angularFireStore.createId();

const newCountry = {
      id:this.tempId,
      name:'Karachi'
      //other fields...
    }

this.angularFireStore.collection('Countries').doc(this.tempId).set(newCountry).then(res => {
  console.log('country added')
}).catch(err => {
  console.log('error adding country',err)
});