What is the difference between *ngIf vs [hidden]?Example

When it comes to conditionally showing or hiding elements in an Angular application, developers often encounter two popular options: the *ngIf structural directive and the [hidden] attribute binding. Although they may seem similar, these approaches have distinct characteristics. In this article, we will explore the differences between *ngIf and [hidden].

1. Understanding *ngIf: 

In Angular, the *ngIf directive is a structural directive used to control the rendering of elements based on a given condition. When the condition evaluates to true, the element and its children are displayed in the DOM. Conversely, if the condition is false, the element is removed from the DOM. 

Let's look at an example to better grasp its usage and output:

html
<div *ngIf="showElement">
  <p>This element is conditionally displayed using *ngIf.</p>
</div>

typescript
export class AppComponent {
  showElement: boolean = true;
}

Output: When the showElement property is set to true, the paragraph within the <div> is rendered and visible on the page. However, if showElement is set to false, the element is entirely removed from the DOM, resulting in the paragraph being hidden.

2. Understanding [hidden]: 

On the other hand, the [hidden] attribute binding offers an alternative approach for conditionally controlling element visibility. Instead of removing the element from the DOM, [hidden] manipulates the CSS display property. When the condition is true, [hidden] sets display: none, effectively hiding the element while retaining its position in the DOM. 

Let's consider an example illustrating the usage and output of [hidden]:

html
<div [hidden]="!showElement">
  <p>This element is conditionally displayed using [hidden].</p>
</div>

typescript
export class AppComponent {
  showElement: boolean = true;
}

Output: When showElement is true, the paragraph remains visible on the page, as the display property of the <div> is unaffected. However, when showElement is false, the [hidden] binding sets the display property of the <div> to none, resulting in the paragraph being hidden while still occupying space in the DOM.

Key Differences:

1. DOM Manipulation: *ngIf directly manipulates the DOM, dynamically adding or removing elements based on the condition. Conversely, [hidden] modifies the CSS display property of the element, without altering its presence in the DOM.
2. Performance Considerations: *ngIf is advantageous when dealing with infrequently displayed elements or heavy rendering logic, as it completely removes the element from the DOM when the condition is false. Conversely, [hidden] is suitable when elements need to maintain their position in the DOM, and frequent toggling is expected.
3. CSS Interactions: Since *ngIf adds or removes elements from the DOM, any associated CSS transitions or animations will be triggered accordingly. With [hidden], as the element remains in the DOM, transitions or animations tied to the element's presence may not be triggered.

Conclusion: While both *ngIf and [hidden] offer solutions for conditionally showing or hiding elements in Angular applications, their underlying mechanisms and behaviors differ significantly. *ngIf manipulates the DOM by adding or removing elements, while [hidden] modifies the CSS display property. Understanding these distinctions is crucial in choosing the appropriate approach based on specific requirements.