Angular 6 prevent [hidden] from blinking on page load

Question

I am trying to conditionally hide form validation items with the [hidden] attribute. It works but it blinks on page load even though I added model.pristine to the form.

<div class="alert alert-danger" [hidden]="model.valid || model.pristine">
   The model is required.
</div>

What's wrong with *ngIf? Where is your complete minimal example reproducing the issue? — JB Nizet, Aug 10 '18 at 16:19
If you're using angular, may aswell just change `[hidden]` to `*ngIf` — Woohoojin, Aug 10 '18 at 17:54

Kabb5 · Accepted Answer · 2018-08-13T12:03:49.830

2

Try using the *ngIf structural directive instead of using the [hidden] attribute.

<div class="alert alert-danger" *ngIf="!(model.valid || model.pristine)">
  The model is required.
</div>

You can read more about *ngIf vs. [hidden] here and here.

edited Aug 13 '18 at 12:03

answered Aug 10 '18 at 17:58

Kabb5

3,760
2
33
55

Thanks, I think in this case it should be *ngIf="!model.valid && !model.pristine" – David Sagang Aug 10 '18 at 19:59
Good call, I forgot the flip the expression. Fixed that. – Kabb5 Aug 13 '18 at 12:04

Angular 6 prevent [hidden] from blinking on page load

1 Answers1