How can I console.log the value of a observable?

Question

I am using angular 2 and RxJS, and I am wondering how i can do the following:

In my component, I have defined the following:

count: Observable<number>;

In my component's constructor, I am doing the following:

constructor(     private store: Store<any>   ) {     this.count = this.store.select<any>(state => state.count);   } 

How can I view the current value for the count? Right now if I console.log(this.count) I get a big object to log. If I want to view just the value for this.count, how can I do that?

Answer 1

With a regular observable you only get the value when it changes, so if you want to console.log out the value you will need to console.log it in the subscription:

constructor(     private store: Store<any>   ) {     this.count = this.store.select<any>(state => state.count);     this.count.subscribe(res => console.log(res));   } 

However if you are wanting to be able to get the current value at any time what you will be wanting is a BehaviorSubject (which combines an Observable and an Observer in function...import it from the rxjs library like you do Observable).

private count:BehaviorSubject<number> = new BehaviorSubject<number>(0);  constructor(     private store: Store<any>   ) {     let self = this;     self.store.select<any>(state => self.count.next(state.count));   } 

Then any time you want to get the current value of the count you would call this.count.getValue() to change the value you would call this.count.next(<the value you want to pass in>). That should get you what you are looking for.

Answer 2

With recent versions of RxJS (AFAIR starting from 6.0) the proper way is to use .pipe(). And to answer to your question you need tap operator.

constructor(     private store: Store<any>   ) {     this.count = this.store.select<any>(state => state.count).pipe(         tap(countValue => console.log('Count: ', countValue))     );   }