Utilizing a Firebase function with Angular

Question

Utilizing a Firebase function with Angular

I created the following function:

  retrieveLikedProperties(): AngularFirestoreCollection<any> {
    return this.afs.collection('users', ref =>
      ref.where('uid', '==', this._auth.currentUserId)
        .where('likedProp', '==', true)
    );
  }

When attempting to call it, I used the following method:

  ngOnInit() {
      this._property.retrieveLikedProperties().subscribe(likedProp => {
        console.log(likedProp);
        this.likedProp = likedProp;
      });

    }

Unfortunately, I encountered an error stating:

ERROR TypeError: this._property.retrieveLikedProperties is not a function

Does anyone have insights on why this is happening, and how to correctly call this function?

javascript angular typescript firebase

Answer 1

Answer №1

Your service function getAllLikedProperties() needs to be updated as it currently does not return an observable, but rather the value of your filtered afs collection.

To fix this, modify your function to return an observable that you can subscribe to:

getAllUserLikedProperties(): AngularFirestoreCollection<any> {

    const properties$: Subject<any> = new Subject<any>();
    properties$.next(this.afs.collection('users', ref =>
      ref.where('uid', '==', this._auth.currentUserId)
        .where('likedProp', '==', true)
    ));
   return properties$;
}

Another approach is to utilize RxJs's of operator to handle the observable stream:

import { of } from 'rxjs';

getAllUserLikedProperties(): AngularFirestoreCollection<any> {
    return of(this.afs.collection('users', ref =>
      ref.where('uid', '==', this._auth.currentUserId)
        .where('likedProp', '==', true)
    ));
}

If you prefer not to subscribe explicitly, you can directly assign the value like this:

ngOnInit() {
    this.likedProp = this._property.getAllUserLikedProperties();
}

Answer 2

Your service function getAllLikedProperties() needs to be updated as it currently does not return an observable, but rather the value of your filtered afs collection.

To fix this, modify your function to return an observable that you can subscribe to:

getAllUserLikedProperties(): AngularFirestoreCollection<any> {

    const properties$: Subject<any> = new Subject<any>();
    properties$.next(this.afs.collection('users', ref =>
      ref.where('uid', '==', this._auth.currentUserId)
        .where('likedProp', '==', true)
    ));
   return properties$;
}

Another approach is to utilize RxJs's of operator to handle the observable stream:

import { of } from 'rxjs';

getAllUserLikedProperties(): AngularFirestoreCollection<any> {
    return of(this.afs.collection('users', ref =>
      ref.where('uid', '==', this._auth.currentUserId)
        .where('likedProp', '==', true)
    ));
}

If you prefer not to subscribe explicitly, you can directly assign the value like this:

ngOnInit() {
    this.likedProp = this._property.getAllUserLikedProperties();
}

Utilizing a Firebase function with Angular

Answer №1

Similar questions

Scroll the div that is dynamically filled without affecting the scrolling of the main page

Troubleshooting problem with transmitting data using the b4j jQuery WebSocket library

Displaying or concealing list elements in Angular 6

The IISNode website displays directory contents instead of launching the server.js file

Altering the appearance of an input field upon submission

Executing a function after a subscriber has finished in Angular 8+

Warning: data and salt parameters are necessary, please provide them

What is the definition of XLLS?

Learn how to alter the website's overall appearance by changing the background or text color with a simple click on a color using Angular

Reading Properties in VueJS with Firebase

The issue at hand is why the closure is not functioning properly when variables are assigned to the callback of the getCurrentLocation function

Different Ways to Access an Array in an EJS Template

utilize the entire space designated for the <router-outlet> component

release a Node.js module on NPM

The behavior of Elementor lightbox buttons upon being clicked

What steps can I take to troubleshoot a non-functional button in a Bootstrap 5 Modal?

What is the purpose of declaring data types such as string, number, boolean, void, and others in Angular 2

items within the grid container are positioned without being constrained to rows and columns

Direct users to a different page upon reloading the page in Django

Utilizing Angular: Integrating the Http response output into a map