angular - What is the difference between *ngIf and [hidden]?

Question

Say I check it against and expression, then aren't these two same ?

<div *ngIf="expression">{{val}}</div>

<div [hidden]="!expression">{{val}}</div>

Answer 1

There is actually a performance difference between them:

ngIf will comment out the data if the expression is false. This way the data are not even loaded, causing HTML to load faster.

[hidden] will load the data and mark them with the hidden HTML attribute. This way data are loaded even if they are not visible.

So [hidden] is better used when we want the show/hide status to change frequently, for example on a button click event, so we do not have to load the data every time the button is clicked, just changing its hidden attribute would be enough.

Note that the performance difference may not be visible with small data, only with larger objects.