What is the difference between ngIf and hidden property in Angular?

The ngIf directive and the hidden property are both ways to control the visibility of an element in Angular. The ngIf directive is a structural directive, which means that it changes the structure of the DOM by adding or removing elements. The hidden property, on the other hand, is a simple property that sets an element's display CSS property to none.

One key difference between ngIf and the hidden property is that ngIf can add or remove an element from the DOM, while the hidden property simply hides the element that it is applied to. This means that when an element is removed from the DOM by ngIf, it is no longer available for interaction or event handling. In contrast, an element that is hidden by the hidden property is still in the DOM, but is simply not visible on the page.

Generally it is expensive to add and remove elements from the DOM for frequent actions.