angular / angularfire

Angular + Firebase = ❤️
https://firebaseopensource.com/projects/angular/angularfire2
MIT License
7.69k stars 2.19k forks source link

Examples for Realtime Database query using latest packages #3093

Open moblizeit opened 2 years ago

moblizeit commented 2 years ago

Ionic:

Ionic CLI : 6.18.1 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 6.0.0 @angular-devkit/build-angular : 13.0.4 @angular-devkit/schematics : 13.0.4 @angular/cli : 13.0.4 @ionic/angular-toolkit : 5.0.3

Capacitor:

Capacitor CLI : 3.3.3 @capacitor/android : not installed @capacitor/core : 3.3.3 @capacitor/ios : 3.3.3

Utility:

cordova-res (update available: 0.15.4) : 0.15.3 native-run : 1.5.0

System:

NodeJS : v14.17.0 (/usr/local/bin/node) npm : 7.24.0 OS : macOS Monterey

my key package.json "@angular/core": "~13.0.0", "@angular/fire": "^7.2.0", "firebase": "^9.4.0",

I see examples of using FireStore everywhere with latest way of querying it

However, I do not see it using RealTimeDatabase

the code in examples still using older. AngularDatabaseModule

google-oss-bot commented 2 years ago

This issue does not seem to follow the issue template. Make sure you provide all the required information.

moblizeit commented 2 years ago

all the info is provided

bebimoj commented 2 years ago

I just started using the new firebase after a while. I see a lot of changes yet the docs / examples are not updated. Where can i find documentation for new version of angular fire or are the old docs / examples still relevant?

jean-paul-supy-io commented 2 years ago

I was able to do it the following way, however I'm having some issues, below is my code:

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { Database, equalTo, list, ListenEvent, onValue, orderByChild, query, ref } from '@angular/fire/database';
import { doc, docData, Firestore } from '@angular/fire/firestore';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
  constructor(private readonly firestore: Firestore, private readonly db: Database) {
    // WORKS, returns Unsubscribe
    onValue(query(ref(this.db, '/my/path/to/collection'), orderByChild('child'), equalTo('myVal')), snap =>
      console.log(snap),
    );

    // FAILS, Error: Index not defined, add ".indexOn": "child" ("child" is already indexed by the way)
   // works with `stateChanges` instead of `list`
    list(query(ref(this.db, '/my/path/to/collection'), orderByChild('child'), equalTo('myVal')), {
      events: [ListenEvent.value],
    }).subscribe(console.log);

    // Returns document stream
    docData(doc(this.firestore, 'my', 'path', 'to', 'document')).subscribe(console.log);
  }
}

Any help would be appreciated