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 environment.prod.ts 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-toolbar>
<ion-title>
Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-searchbar showCancelButton (ionInput)="filterList($event)"> </ion-searchbar>
<ion-list>
<ion-item *ngFor="let item of goalList">
<ion-label>{{item.goalName}} </ion-label>
</ion-item>
</ion-list>
</ion-content>
homepage.ts
import { Component,OnInit } from '@angular/core';
import {AngularFirestore} from '@angular/fire/firestore';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit{
public searchList: any[];
public loadedsearchList: any[];
constructor(private firestore:AngularFirestore) {}
ngOnInit(){
this.firestore.collection(`name`).valueChanges().subscribe(searchList => {
this.searchList = searchList;
this.loadedsearchList = searchList;
});
}
initializeItems():void {
this.searchList= this.loadedsearchList;
}
filterList(evt){
this.initializeItems();
const searchTerm = evt.srcElement.value;
if(!searchTerm){
return;
}
this.searchList= this.searchList.filter(currentGoal =>{
if(currentGoal.goalName && searchTerm){
if(currentGoal.goalName.toLowerCase().indexOf(searchTerm.toLowerCase())>-1){
return true;
}
return false;
}
});
}
}
environment.ts
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';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFireAuthModule,
AngularFireDatabaseModule,
AngularFireStorageModule ],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
!