flashing content of *ngIf using an Observable

Question

I develop an Angular app. I want to display some text when my app is not in production, otherwise nothing. I have the following code, where environment is an observable:

<span *ngIf="(environment | async) !== 'production'">bla bla text...

The problem is that it shows the content as long as the observable is not resolved.

I think this resolves to :

undefined !== 'somestring'

and therefore the condition is validated and the text displayed. This is not what I want, I want no display, no evaluation of the expression before resolution of the observable.

What syntax should I use to prevent the flash of undesired content ?

thanks for any help

Answer 1

You could test for the undefined, null and 'production' with Array.indexOf:

<span *ngIf="[undefined, null, 'production'].indexOf(environment | async) < 0">