What is the difference between ngIf and hidden property in Angular?
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
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.