Test value of Angular 2 Observable for giving CSS class
<p>I can display a value produced by an Observable using <code>{status_async | async}</code> in html.</p>

<p>However, how can I test whether this Observable is equal to something?</p>

<p>Specifically, I'd like to use it to assign a class:</p>

<pre><code>&lt;div [ngClass]="{'has-danger': status_async == 'created before'}"&gt;
    &lt;input type="text"&gt;
&lt;/div&gt;
</code></pre>

<p>I discovered that I can use:</p>

<pre><code>&lt;div [ngClass]="{'has-danger': (status_async | async) == 'created before'}"&gt;
</code></pre>

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

<p>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.</p>

<p>How can I solve this issue?</p>