Test value of Angular 2 Observable for giving CSS class

Question

I can display a value produced by an Observable using {status_async | async} in html.

However, how can I test whether this Observable is equal to something?

Specifically, I'd like to use it to assign a class:

<div [ngClass]="{'has-danger': status_async == 'created before'}">
    <input type="text">
</div>

I discovered that I can use:

<div [ngClass]="{'has-danger': (status_async | async) == 'created before'}">

But then the issue becomes that I have used async twice (here and for displaying the value).

As I'm checking the status of a succesful creation, ironically after the second async the value changes to 'created before', even when I clicked my create button only once.

How can I solve this issue?

In your Observable use share() to avoid subscribing twice. — Eric Martinez
– Eric Martinez, Commented Feb 21, 2016 at 13:50

Thierry Templier · Accepted Answer · 2016-02-21 13:56:37Z

2

You need to be careful when using several async pipe on the same observable since this means that there are now several subscribers on it (the subscribe method is called several times, one per use of the async pipe).

In the case of an observable created from an HTTP call, the corresponding request will be called twice if subscribed twice)... By default such observables are cold (they can't be shared).

You need to make your observable hot using the share method:

this.status_async = this.status_async.share();

answered Feb 21, 2016 at 13:56

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

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

8 Comments

PascalVKooten Over a year ago

I'm returning from http.post.map() and then in the view { status_async | async}. I noticed this.status_async = this.status_async.share(); doesn't work then anymore afterwards.

Thierry Templier Over a year ago

You set the return of the map method into the status_async property? Did you add the share operator like the map one?

Thierry Templier Over a year ago

Simply do the following: http.post(...).map(...).share(). This should work.

Thierry Templier Over a year ago

See this answer: stackoverflow.com/questions/34677947/…

Thierry Templier Over a year ago

To import the share operator: import 'rxjs/add/operator/share';

|

Collectives™ on Stack Overflow

Test value of Angular 2 Observable for giving CSS class

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related