CODEWITHSUNDEEP
angular
David Sagang
David Sagang

Reputation: 342

Angular 6 prevent [hidden] from blinking on page load

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>

Upvotes: 2

Views: 1249

Answers (1)

Kabb5
Kabb5

Reputation: 3870

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.

Upvotes: 2

Related Questions