CODEWITHSUNDEEP
angularionic3google-cloud-firestoreangularfire2
Makfe MAKIADI
Makfe MAKIADI

Reputation: 53

How can I retrieve a subcollection using Angular Firestore?

I have created a Collection "Cuisniers" and a SubCollection "Produits" in Firestore. I am able to create a document and fields from code.

enter image description here

I am also able to retrieve data from the collection "Cuisiniers" 

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
// We MUST import both the firebase AND firestore modules like so
import * as firebase from 'firebase';
import 'firebase/firestore';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import 'rxjs/add/operator/map';
import { Cuisinier } from '../../models/cuisinier';
import { FormsModule } from '@angular/forms';
import { storage } from 'firebase';
import { ListeproduitPage } from '../listeproduit/listeproduit';

@Component({
  selector: 'page-listerestau',
  templateUrl: 'listerestau.html',
})
export class ListerestauPage  {

    cuisiniersCol: AngularFirestoreCollection<Cuisinier>;
    cuisiniers: Observable<Cuisinier[]>;

    constructor(public navCtrl: NavController, public navParams: NavParams, private afs: AngularFirestore) {

        this.cuisiniersCol = this.afs.collection('cuisiniers');
        this.cuisiniers = this.cuisiniersCol.valueChanges();

    }

    ngOnInit(){
        this.afs
        .collection('cuisiniers')
        .snapshotChanges()
        .subscribe(result => {
            console.log(result);
        });

    }
listeproduitPage = ListeproduitPage;

<ion-content padding>
  <ion-card *ngFor="let cuisinier of cuisiniers | async"
    [navPush]="listeproduitPage" [navParams]="cuisinier">
    <img src="https://thumbs.dreamstime.com/b/chef-africain-délicieux-32896684.jpg"/>
    <ion-card-content>
      <ion-card-title>
        {{ cuisinier.nom }}
        </ion-card-title>
        <p>Adresse: {{ cuisinier.adresse }}</p>
        <p>{{ cuisinier.categorie }}</p>
    </ion-card-content>
  </ion-card>
</ion-content>

but I cannot figure out how to retrieve my SubCollection "Produits"

Someone can help me please ? :))

Upvotes: 3

Views: 2568

Answers (1)

Shubham Chaudhary
Shubham Chaudhary

Reputation: 499

Use this to read your subcollection inside a cuisinier doc.

this.afs
    .collection('cuisiniers/{cuisineId}/Produits')
    .snapshotChanges()
    .subscribe(result => {
        console.log(result);
    });

Upvotes: 1

Related Questions