How to return an Observable in angular 4?

Question

I have this method inside a authProvider provider class:

getUser() {
    return this.afAuth.authState.subscribe(user => {
        return user;
    });
}

I would like to subscribe to it in a different class, something like:

this.authProvider.getUser().subscribe(user => console.log(user));

any ideas how to return an Observable inside the getUser() method?

Suren Srapyan · Accepted Answer · 2017-09-12T05:21:10.433

8

Your authState is already Observable. Just return your authState and subscribe within another function. In the function for any other work you can use RxJS#map function.

getUser() : Observable {
    return this.afAuth.authState.map(...);
}

....

login() {
   getUser().subscribe(user => {
       return user;
   });
}

edited Sep 12 '17 at 05:21

answered Sep 12 '17 at 04:58

Suren Srapyan

66,568
14
114
112

score 3 · Answer 2 · answered Sep 12 '17 at 04:56

3

Don't subscribe inside the getUser function. Just return the obsevable.

getUser() {
    return this.afAuth.authState
}

answered Sep 12 '17 at 04:56

Sachila Ranawaka

39,756
7
56
80

makes sense. but, for the sake of the question.. how would I return an `Observable` – Patrioticcow Sep 12 '17 at 04:58
1

I'm confused. isn't `this.afAuth.authState` returning an observable ?? – Sachila Ranawaka Sep 12 '17 at 05:01
if you want to change the return type of `getUser` function to observable then change it like `getUser(): Observable` – Sachila Ranawaka Sep 12 '17 at 05:02
`authState` is an observable, yes.. but, suppose I want to consume it in there, and then return some other, new `Observable` – Patrioticcow Sep 12 '17 at 05:04

score 3 · Answer 3 · edited Sep 05 '18 at 20:53

3

You can do something like this. Then in your component, the one which is calling this function, you can subscribe to this observable.

getUser(): Observable<any> {
    return Observable.create( (observer: Observer<string>) => {
     this.afAuth.authState.subscribe(user => {
        observer.next(user);
    }, (err) => observer.error("error"));
}); 
}

Ashley

edited Sep 05 '18 at 20:53

mwilson

12,295
7
55
95

answered Sep 12 '17 at 05:13

ashley

1,008
17
37

You can also use [`Subjects`](https://stackoverflow.com/questions/34849873/what-are-the-semantics-of-different-rxjs-subjects/34860777#34860777)... – P. Moloney Sep 12 '17 at 09:43
1

create is deprecated, use new Observable() instead : `getUser(): Observable { return new Observable( (observer: Observer) => { this.afAuth.authState.subscribe(user => { observer.next(user); }, (err) => observer.error("error")); }); }` – Intuitisoft Nov 18 '19 at 18:42

score 1 · Answer 4 · answered Sep 12 '17 at 05:00

1

You need to set return type as observable

getUser(): Observable<Type> {
    return this.afAuth.authState;
    });
}

answered Sep 12 '17 at 05:00

Dheeraj Kumar

3,917
8
43
80

score 0 · Answer 5 · answered Sep 12 '17 at 05:08

You can return the function directly and subscribe to it in another class.

  getUser() {
        return this.afAuth.authState();
  }

You can think of observables as functions that are called by subscribing.

this.authProvider.getUser().subscribe(user => console.log(user));

How to return an Observable in angular 4?

5 Answers5