How to use collection data from firestore ? Ionic Angular


Angular CLI: 13.0.4
ionic –version => 6.20.2

Hi! I’m kind of new to Ionic / Angular / Firebase.
I’m using Firebase firestore as my database, I have already created the collection and filled it with data.
What is the easiest solution to display a single document from the collection on a page ? Currently I’m stuck at writing it to the console and can’t display it on the HTML. After hours of searching I hope someone can help me out with this one.


import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import {AngularFirestore} from "@angular/fire/compat/firestore";

  selector: 'app-first-place',
  templateUrl: './',
  styleUrls: ['./'],
export class FirstPlacePage implements OnInit {

    private router: Router,
    private afs: AngularFirestore,
    ) {}

  ngOnInit() {
      .subscribe(value => console.log(value[0]));

From the console I’m getting this output: {rentplaceTitle: ‘Second page’, rentplaceHref: ‘secondref’, rentplaceWaterBike: 44, rentplaceSup: 50, rentplaceOwnerEmail: ‘[email protected]’, …}

I have tried cutting the array but everytime when I referred to it in the HTML I only got as a result.


Just grab what you receive and display it as Json format with JsonPipe to debug your response object.

  {{content | json}}


content: any;

ngOnInit() {
    .subscribe(value => this.content = value);


Answered By – paranaaan

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published