How to return value as an observable in angular 6

Question

I want to return value (any data) from service to component as an observable. After a couple of digging into observables found following solution:

class AppService {
    getData(value) {
        // do we have any other best way to return value as an observable
        return Observer.create((observer) => {
            observer.next(value);
        });
    }
}

class AppComponent implements OnInit {
    ngOnInit() {
        this.dataService$ = this.appService.getData().subscribe((data) => {
            // do some task with data
        });
    }
}

return of(value)

Ashish Ranjan
– Ashish Ranjan

2019-03-05 09:14:25 +00:00
Commented Mar 5, 2019 at 9:14 — Ashish Ranjan
– Ashish Ranjan, Commented Mar 5, 2019 at 9:14
You already found the answer, what's the question here ?

Sachin Gupta
– Sachin Gupta

2019-03-05 09:26:33 +00:00
Commented Mar 5, 2019 at 9:26 — Sachin Gupta
– Sachin Gupta, Commented Mar 5, 2019 at 9:26

TheParam · Accepted Answer · 2019-03-05 16:22:54Z

9

Just return like below

import { Observable, of } from 'rxjs';

...

getData(value) : Observable<any> {
   // Simple way of sending value using of operator.
   return Observable.of(value);
}

Hope this help!

edited Mar 5, 2019 at 16:22

answered Mar 5, 2019 at 9:17

TheParam

10.6k4 gold badges43 silver badges54 bronze badges

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

2 Comments

Amit Agrawal Over a year ago

thanks it worked, do you know if I need to do either way means returning observable as a value;

TheParam Over a year ago

yes you need to return observable as value so that you can subscribe to obsevable to get data in component

Eliya Cohen · Accepted Answer · 2019-03-05 09:21:23Z

7

Use of like so:

import { of } from 'rxjs';
...
return of(value);

which is equivalent to:

return new Observable(obs => obs.next(value));

However, if you want to convert a given value (e.g. a Promise, an Observable-like, an Array, an iterable or an array-like object) you may want to use from:

import { from } from 'rxjs';
...
return from(value);

edited Mar 5, 2019 at 9:21

answered Mar 5, 2019 at 9:16

Eliya Cohen

11.6k14 gold badges79 silver badges127 bronze badges

Comments

Hadrien Delphin · Accepted Answer · 2019-03-05 10:03:20Z

2

Here's what I do

In your service file :

First I declare my observable this way

  myObs: BehaviorSubject<any> = new BehaviorSubject([]);

In a method you can set your datas into your obs :

var myArray = [1,2,3,4,5];
this.myObs.next(myArray);

If you want your "controller" to subscribe this obs, in your service, just expose a getter :

public getMyObs(){
return this.myObs.asObservable()
}

And in your "controller" you can call it this way :

 ngOnInit() {

this.myService.getMyObs().subscribe(datas => {
    Do What you want with your datas
  }
}

edited Mar 5, 2019 at 10:03

answered Mar 5, 2019 at 9:56

Hadrien Delphin

6201 gold badge7 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to return value as an observable in angular 6

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related