What is the purpose of ngIf vs hidden?

Angular has usable conditionally display options of both the ngIf and the [hidden] – they are used differently:

• *ngIf: These functions add or remove the element entirely to the DOM depending on the condition. In case it is a false condition, the element with its children is destroyed. This is more effective in instances where you do not require the element.

• [hidden]: Only toggles the CSS display: none property. The element still exists in the DOM and keeps its state, but it’s just not visible.

Note

– Use *ngIf when you want to remove elements from the DOM.
– Use [hidden] when you just want to hide elements while keeping them in the DOM.