Problems Connecting to Firestore Cloud Database

I am trying to create a search bar in an ionic application to filter through a collection in Firebase Cloud firestore database. I cannot seem however to establish a connection. I have placed credentials in environment.ts and and then injected firebase key into app module.ts

The code for the search bar works fine and the search bar loads however no results from the collection are being printed. The collection is simply called ‘name’

I will attach the code below, if anyone sees any issues please let me know.

HomePage.html - this is used to create search bar and list to filter through

<ion-header [translucent]="true">

<ion-content [fullscreen]="true">
  <ion-searchbar showCancelButton (ionInput)="filterList($event)"> </ion-searchbar>
  <ion-item *ngFor="let item of goalList">
    <ion-label>{{item.goalName}} </ion-label>




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

  selector: 'app-home',
  templateUrl: '',
  styleUrls: [''],
export class HomePage implements OnInit{
  public searchList: any[];
  public loadedsearchList: any[];

  constructor(private firestore:AngularFirestore) {}

    this.firestore.collection(`name`).valueChanges().subscribe(searchList => {
      this.searchList = searchList;
      this.loadedsearchList = searchList;
   initializeItems():void {
     this.searchList= this.loadedsearchList;

     const searchTerm = evt.srcElement.value; 

   this.searchList= this.searchList.filter(currentGoal =>{
  if(currentGoal.goalName && searchTerm){
      return true; 
    return false; 



export const environment = {
  production: false,
  firebaseConfig:{ credentials are in here 

app.module.ts page where calling firebaseconfig from environment.ts with credentials.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { AngularFireStorageModule } from '@angular/fire/storage';
import { environment } from '../environments/environment';

  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireStorageModule ],

  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  bootstrap: [AppComponent]
export class AppModule {}

Hey there,

Do you get any issues or errors printed in the console when the page loads? Or if you try to log the value of

this.searchList = searchList;
this.loadedsearchList = searchList;

Inside the .subscribe() what does it log?

I believe it is your code I was actually trying to implement. Thanks for trying to help
. I tried to console.log inside subscribe and didnt get any output.

The error I keep getting from console is this:

failed to load; server responded with status of 404 not found - local/host 1

im guessing this is an error with the set up of the database.

For testing purposes I made a collection called goals similar to the code, I am declaring credentials inside app.module.ts so I don’t quite know why I am having issues connecting to db

Do you have a repo I can try? I can take a look and see if it’s on configuration side or if the issue is somewhere else.

Hi, I now have a message logging from the console

I am not sure if I am just being stupid and its simply the wrong variable names I am calling from my collection

my github repo is herem it is just a simple project with the search bar in and homepage.ts


Hi, I have now got the data loading into the search bar. The search bar is not quite working yet but I am working on it.
If you dont mind i have a few questions.
If i want to be able to filter by multiple fields would this be possible?
Ideally i would like the user to make a selection based on name displayed from the search and then be able to pull more fields from the database such as location, date etc when this name is selected.

any help would be appreciated

Hey there, glad you got it working :smiley:!

To get the data from multiple properties you’ll want to add them to the filter function, something like:

this.goalList = this.goalList.filter(currentGoal => {
  if ( (currentGoal.goalName.toLowerCase().indexOf(searchTerm.toLowerCase()) ||
       (currentGoal.otherProperty.toLowerCase().indexOf(searchTerm.toLowerCase())) > -1) {
  return true;
  } else {
    return false;

Also, I don’t know what the end goal is, if you’re looking for something more robust, we’ve been using ionic selectable at my company for 2 BIG enterprise apps and both the development team and management team are ultra happy with it hahaha :stuck_out_tongue:

Ideally i would like the user to make a selection based on name displayed from the search and then be able to pull more fields from the database such as location, date etc when this name is selected.

This all depends on how your data is structured in the DB, if you are pulling the list and the documents have all the properties you’ll get them all immediately. You can’t tell Firebase “Just send me X, Y, or Z properties of this document.” (Or at least I’m not aware of it).

Do let me know if this helps, or if you need anything else :smiley:.