What's the difference between ngIf and [hidden]?

ngIf conditionally adds or removes elements from the DOM based on an expression, improving performance by not rendering hidden elements. [hidden] only toggles the visibility via CSS but keeps elements in the DOM.

Use ngIf when you want to completely remove elements and their bindings to optimize rendering. Use [hidden] when you need the element to stay in the DOM but be visually hidden.

Code

<div *ngIf="isVisible">This div is added/removed from DOM.</div>
<div [hidden]="!isVisible">This div stays in DOM but is hidden.</div>