What is the best way to perform a query in Angular using Firebase Firestore?

I am attempting to execute queries in Angular 6 using Firebase Firestore. I have this code, and I have already installed the package "npm firebase @angularfire" but it is not working:

    import { Component } from '@angular/core';
    import { AngularFirestore, AngularFirestoreCollection } from 
    '@angular/fire/firestore';
    import {Lesson} from './models/lesson.model'
    import { Observable} from 'rxjs';
    import {BehaviorSubject} from 'rxjs/BehaviorSubject';
    import {switchMap} from 'rxjs/operators'; 
    import * as moment from 'moment';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {

      lessonRef:AngularFirestoreCollection<Lesson>;
      lesson$: Observable<Lesson[]>;
      endDate$: BehaviorSubject<Date>;

      constructor(afs:AngularFirestore){
        this.endDate$ = new BehaviorSubject(new Date('2017-12-24'));

        this.lesson$= this.endDate$.pipe(
          switchMap(date=>
          afs.collection<Lesson>('Lesson', ref => 
          ref.where('endDate', "==", date))
          .valueChanges(),
          ),
        );

      }

Answer №1

Make sure you're not forgetting to declare the variable ref in your code. Refer to the AngularFire documentation for guidance:

To create queries, you must start with the

firebase.firestore.CollectionReference
.

Follow the steps outlined in the Firestore documentation to define a CollectionReference:

let ref = firebase.firestore().collection("Lessons");

Once you have defined the collection reference, you can proceed to create an AngularFire2 collection using the existing code with a query applied on top of it.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountered an error while trying to install a package using NPM due to the requirement of 'require-from-string@

Every time I try to install a package (even nodejs), I encounter this issue. Here is what I have tried so far: Uninstalled all dependencies Cleared cache Reinstalled NPM / AngularCli Unfortunately, running any NPM command still results in the same error ...

Definition of union types in JavaScript using Typescript

Looking for assistance in creating a d.ts file for the union-type library found at https://github.com/paldepind/union-type Consider the following union type: let Maybe = Type({ Nothing: [] , Just: [Number] }) I am interested in setting up compi ...

What is the best way to divide two ranges that are intersecting?

Seeking a method to divide two overlapping ranges when they intersect. This is my current progress using typescript, type Range = { start: number; end: number; }; function splitOverlap(a: Range, b: Range): Range[][] { let result = []; const inters ...

When imported, Node / JS instantly generates a new instance

Is there a way to instantiate a class without importing it first and using new afterward? Instead of var mainClass = require('../dist/main'); // has "class Main { ... }" var mainInstance = new mainClass(); I am looking for something like var ...

Is there a method to incorporate lists of varying types in a single v-for loop without causing any issues with type validations?

My current component is designed to display two different datasets, each with their own unique nature of data: state.articleTypeList: string[] state.renderPriceClassNameList: {[key: string]: string[]} To render both datasets within a single v-for componen ...

gather and handle data from the shared interface between different parts

I have two different paths. One is for products and the other is for products-cart. I want to use a shared ts file for both to store the product and cart information in an array. However, I am encountering an issue. I am unable to make any changes or trans ...

What are some creative ways to emphasize certain dates?

Is there a way to customize mui-x-date-pickers to highlight specific days from a Date array with green filled circles around them? I am using new Date and wondering how to achieve this effect. Below is the code snippet I am currently working with: <Dat ...

Converting an array of objects to an array based on an interface

I'm currently facing an issue with assigning an array of objects to an interface-based array. Here is the current implementation in my item.ts interface: export interface IItem { id: number, text: string, members: any } In the item.component.ts ...

Guidelines on adjusting the hue of the card

I have created a directive to change the color of cards @Directive({ selector: "[appColor]", }) export class ColorDirective { @Input("color") color: string; constructor(private element: ElementRef, private render: Renderer2) { ...

Having difficulty reaching the specified route ID in Angular app

I'm encountering an issue when attempting to navigate to a route with an ID argument using the router. Here's the code snippet from my component: import { Router } from '@angular/router'; ... constructor(private router: Router) { } .. ...

Using the SwitchMap operator in conjunction with an array

I'm currently diving into the world of rxjs and exploring the Observable concept. I have a unique situation where I am dealing with a <Room>{} class that allows <Player>{} entities to join in a many-to-many relationship style. Within Fire ...

Implementing form validation in Angular2 without using the <form> tag

Is there a way to perform form validation in Angular 2 without using the typical form tag setup? For instance, I would like to set a required field below: <div class="form-group"> <label for="name">Name</label> <input type=" ...

What is the best way to make mouse and touch events trigger responses in Angular versions 9 and above?

I've been searching high and low for a library or tried-and-true method to handle common user events reactively, but unfortunately my quest has come up empty. After some digging, I stumbled upon what seemed like a solid solution: https://github.com/t ...

`On the first date chosen, activate an event within the ngx-bootstrap daterangepicker.`

I am utilizing a date range picker with the following code: <bs-daterangepicker-inline [bsValue]='bsValue' (bsValueChange)="test()"></bs-daterangepicker-inline>. Is there a way to trigger an event when the first date is sel ...

How can I retrieve query parameters passed from an Angular application in PHP?

I'm trying to figure out how to retrieve data from query parameters sent by an Angular application in PHP. Unfortunately, I don't have much experience with PHP. Is there anyone willing to lend a hand? ...

Implementing Form Validation in Angular 5 and showing errors in a reusable component

My current setup includes a generic component structured as follows: // selector: 'app-text-box' <form> <input type="text" [name]="data.name" [id]="data.name"/> </form> <error-message [message]="message"></ ...

Learn the dynamic binding method for <a href> templates in Angular 2!

Kindly review the code snippet provided below: Component.ts getReply():string{ if(condition){ return "The link is: <a href = 'https://www.google.com'>Google</a>"; } } In my front end, I am using [innerHtml] to bind ...

Issue encountered while declaring a variable as a function in TSX

Being new to TS, I encountered an interesting issue. The first code snippet worked without any errors: interface Props { active: boolean error: any // unknown input: any // unknown onActivate: Function onKeyUp: Function onSelect: Function onU ...

Vitest's behavior shows variance when compared to compiled JavaScript

Challenge Currently, I am developing a package that relies on decorators to initialize class object properties. The specific decorator is expected to set the name property of the class. // index.ts const Property = (_target: any, key: any) => { } cl ...

Old version of Nativescript appium testing being installed ORAn outdated

I am in the process of creating a mobile application using nativescript + angular, and I am currently testing it with Appium. However, when I execute end-to-end tests using the following command, it seems to load an older version of my app. tns build andr ...