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

For reference: https://ultimatecourses.com/blog/angular-ngif-async-pipe — Adam Jenkins, Dec 18 '19 at 17:22
@Adam I would have loved it but : Uncaught Error: Template parse errors: Parser Error: Unexpected token !== at column 24 in [(environment | async)? !== 'production'] — Olivvv, Dec 18 '19 at 17:39

score 5 · Answer 1 · answered Dec 18 '19 at 17:22

5

Subscribe once and for all in your component, and test the actual emitted value in your template:

<span *ngIf="env && env !== 'production'">

Or subscribe once in your template, and store the result in a variable:

<ng-container *ngIf="environment | async as env">
  <span *ngIf="env !== 'production'">

answered Dec 18 '19 at 17:22

JB Nizet

678,734
91
1,224
1,255

thanks for your answer. Not using observable in template is indeed a solution, but wanted a way to use them in there. Your second proposal is a bit verbose imo, and not convenient to generalize. – Olivvv Dec 18 '19 at 18:02
It is the recommended way to use async: you subscribe once, and only once, and assign the result to a variable that you can use as many times as you want without resubscribing again and again. Remember that every time you use async in a template, you subscribe to the observable. If it's cold, you thus trigger the pipeline again. If it's an HTTP observable, you send a new HTTP request every time. – JB Nizet Dec 18 '19 at 18:07
So it is not good to use observables directly in a template ? Then the async pipe is a little bit misleading toward the wrong pattern (we had that kind of cases already in angularjs) – Olivvv Dec 18 '19 at 18:12
It is absolutely fine, but you must understand how it works, what it implies, and how best to write your code to avoid nasty situations. – JB Nizet Dec 18 '19 at 18:13
Sure, this is true for everything. Until now I thought that async pipe was totally harmless, and that it was better to shrink the component size and push stuff into the template. I ll know better now – Olivvv Dec 18 '19 at 18:16

ConnorsFan · Accepted Answer · 2019-12-18T17:46:04.617

2

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

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

edited Dec 18 '19 at 17:46

answered Dec 18 '19 at 17:18

ConnorsFan

70,558
13
122
146

unfortunately I do not know the list of possible environments. No white list, only a blacklist – Olivvv Dec 18 '19 at 17:20
OK. I modified my answer. – ConnorsFan Dec 18 '19 at 17:23
this looked good, but I still have the flash. Before resolution, is environment undefined, or is it an observable object ? – Olivvv Dec 18 '19 at 17:26
Try adding `null` to the list (I also changed `'prod'` for `'production'` in my example). – ConnorsFan Dec 18 '19 at 17:30
null works in this case. thanks !. Now I need to get it working with : [ngClass]="{'nonproduction': ([null, 'devel'].indexOf(environment | async) < 0) }"> – Olivvv Dec 18 '19 at 17:33
Shouldn't it be: `[ngClass]="{'nonproduction': [null, 'production'].indexOf(environment | async) < 0) }"`. – ConnorsFan Dec 18 '19 at 17:41
Are you sure ? there is two closing parenthesis in your code, only one opening – Olivvv Dec 18 '19 at 17:50
Yeah. You can remove the last closing parenthesis. :-) – ConnorsFan Dec 18 '19 at 17:51
ah ok, I had 'devel' in there just for testing purpose without changing the backend. sorry for confusing you with this typo. – Olivvv Dec 18 '19 at 17:58
Solved it : [ngClass]="{'nonproduction': ([null, 'devel'].indexOf($any(environment) | async) < 0)} – Olivvv Dec 18 '19 at 17:59

flashing content of *ngIf using an Observable

2 Answers2