CODEWITHSUNDEEP
angulartypescriptrxjs
user1354934
user1354934

Reputation: 8841

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

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?

Upvotes: 40

Views: 85346

Answers (2)

Vladimir Prudnikov
Vladimir Prudnikov

Reputation: 7232

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))
    );
  }

Upvotes: 10

Maarek
Maarek

Reputation: 596

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.

Upvotes: 51

Related Questions