Using Observable and Subscribe in Angular with Firebase

Question

I am trying to subscribe to an function returning observable object in angular 2 . So when there is any new worker added the main calling function should have the value

// functiion based on firebase DB

getWorkers():Observable<any> {
    firebase.database().ref('/workers').on('child_added', (snapshot) => {
        return snapshot.val();

    });

}

subscriber function

workers: any[];
public ngOnInit() {
    this.db.getWorkers().subscribe(workers => this.workers = workers);
}

It is saying the function return type is not Observable and hence throwing error .

Shouldn't you return the value? Like return firebase.database().... — Martin Parenteau
– Martin Parenteau, Commented Dec 9, 2017 at 19:54
u mean like this : fbGetData() { return firebase.database().ref('/').on('child_added', (snapshot) => { return snapshot.val(); });} — Mohit H
– Mohit H, Commented Dec 9, 2017 at 19:59
I mean that getWorkers does not return anything in your original code. — Martin Parenteau
– Martin Parenteau, Commented Dec 9, 2017 at 19:59
Can you put return in front of firebase (like you said in your comment above)? — Martin Parenteau
– Martin Parenteau, Commented Dec 9, 2017 at 20:00

rotemx · Accepted Answer · 2017-12-13 09:42:48Z

3

firebase.database() does not return an Observable so you cannot return it.
if you return Observable.of(val) from within the callback function as suggested below, it will only return the callback function and not the outer getWorkers() function.

You need to create an observable from the data returned from the callback.

I would use Observable.bindCallback:

getWorkers():Observable<any> {    
  let fn = firebase.database().ref('/workers').on('child_added', (snapshot) => {
        return snapshot.val();
  });

  return Observable.bindCallback(fn) as Observable<any>
}

then you can use it as any observable:

this.getWorkers().subscribe(data=>{
    ...[code]...
})

here is some info from the docs

edited Dec 13, 2017 at 9:42

answered Dec 9, 2017 at 22:46

rotemx

9641 gold badge8 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mohit H Over a year ago

: Error : () => Observable<void>' is not assignable to type 'Observable<any> , so i tried Observable.bind(fn) , and then found the error : "subscribe is not a function "

rotemx Over a year ago

@HimanshuKhandelwal, try: return Observable.bindCallback(fn) as Observable<any>

hamid_reza hobab · Accepted Answer · 2017-12-09 19:33:56Z

2

your first method must return observable.

getWorkers():Observable<any> {
    firebase.database().ref('/workers').on('child_added', (snapshot) => {
        return Observable.of(snapshot.val());

    });
}

answered Dec 9, 2017 at 19:33

hamid_reza hobab

92912 silver badges21 bronze badges

4 Comments

Mohit H Over a year ago

Observable<any> is still red , "A function whose declared type is neither 'void' nor 'any' must return a value."

rotemx Over a year ago

This is wrong, because the "return" statement will return the inner function (the one that starts with (snapshot) =>{})

Blunderchips Over a year ago

What is the variable firebase?

Emeric Over a year ago

@Blunderchips import * as firebase from 'firebase';

Collectives™ on Stack Overflow

Using Observable and Subscribe in Angular with Firebase

2 Answers 2

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related