How to get ID of collection in Firestore with angular Firestore

Question

I'm not able to get the ID of the document when I query a Firestore Database this way :

Could you give me some help ?

import { Component, OnInit } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection  } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
export interface Item { name: string; }

@Component({
  selector: 'app-annonces-contactees',
  templateUrl: './annonces-contactees.page.html',
  styleUrls: ['./annonces-contactees.page.scss'],
})
export class AnnoncesContacteesPage implements OnInit {
  private annoncesCollection: AngularFirestoreCollection<Item>;
  annonces: Observable<Item[]>;
    constructor(private afs: AngularFirestore) {
      this.annoncesCollection = afs.collection('annonces', ref => ref.where('prix', '>=', 1000000))
      this.annonces = this.annoncesCollection.valueChanges();
   }

  ngOnInit() {
}

}

Answer 1

I am going to give you an example of how I dot it: Let us suppose I have collection of hospitals and each hospital has its name,phone and location.

  constructor(private firestore:AngularFirestore){}
  hospitalsArray=[];
  ngOnInit(){
      this.firestore.collection("hospitals").snapshotChanges().subscribe((data) => {
        this.hospitalsArray = data.map(e => {
          return { id: e.payload.doc.id, location: e.payload.doc.data()["location"], number: e.payload.doc.data()["phone"], name: e.payload.doc.data()["name"]}
        })
  }

"hospitals" is the name of the collection and this id is the id of the document.

So if you want to display in the html file

<ion-item *ngFor="let hospital of hospitalsArray">
<ion-label>{{hospital.name}}</ion-label>
</ion-item>