Returning Observer from a custom function via service : Angular 4

Question

I am new to Observer in Angular4 as I have worked on Promises in AngularJs. I want to understand 2 scenarios:

Returning observable from a function so that the UI can be changed accordingly.
Returning continuous stream of data from a function which is reflected on the UI.

In a service (proc.svc.ts) file I created a function:

counter(){
   public counterObserver = Observable.create(obs => {
    obs.next(increment())
   });
  return counterObserver;
 }

increment(){
  setInterval(function(){
  count++
 },1000)
}

In the proc.component.ts file:

ngOnInit() {
   this.initCounter();
 }

initCounter(){
  this.procSvc.counter.subscribe(count => this.count = count);
}

I am getting below error:

Property 'subscribe' does not exist on type '() => void'.

You created a function : call counter(), not counter !

user4676340
– user4676340

2017-12-21 08:04:43 +00:00
Commented Dec 21, 2017 at 8:04 — user4676340
– user4676340, Commented Dec 21, 2017 at 8:04

Pranay Rana · Accepted Answer · 2017-12-21 08:20:11Z

1

seem like problem with the code also , if you want to push value at specific interval than you have to push vlaue on ovserver , like as given below push value from setInterval() function , that is also problem with you code

const evenNumbers = Rx.Observable.create(function(observer) {
  let value = 0;
  const interval = setInterval(() => {
    if (value % 2 === 0) {
      observer.next(value);
    }
    value++;
  }, 1000);

  return () => clearInterval(interval);
});
//output: 0...2...4...6...8
const subscribe = evenNumbers.subscribe(val => console.log(val));

one more thing as in example its directly subscribing to oberserver not function there is no () present but in you case its fuction as i pointed out below

try like this , as counter is function and that is problem with you code seems like

initCounter(){
  this.procSvc.counter().subscribe(count => this.count = count);
}

you have to provide return type here

counter(): Observable<datatype>{

right now it seems empty that means void. or i do as below when datatype is not known

 public getData(path: string):Observable<any>{
    return this.http.get(path, options)
        .map((response: Response) => response.json())  ;
  }

then aply subscribe on that

 getData("val").subscribe();

also import

import { Observable } from 'rxjs/Observable';

edited Dec 21, 2017 at 8:20

answered Dec 21, 2017 at 8:05

Pranay Rana

177k37 gold badges244 silver badges267 bronze badges

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

2 Comments

Pranay Rana Over a year ago

@Samuel - that is to dispose timer..means when you unsubscribe observer than this function clear the timer that you creaed..check example here : learnrxjs.io/operators/creation/create.html

Pranay Rana Over a year ago

@Samuel - you can see here : github.com/ReactiveX/rxjs/issues/76

Collectives™ on Stack Overflow

Returning Observer from a custom function via service : Angular 4

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related