Angular : *ngIf vs Hidden

 In Angular, both *ngIf and the hidden attribute are commonly used to control the visibility of elements. While they serve similar purposes, they function in fundamentally different ways. Here's an in-depth comparison to help you decide which to use based on your needs:

1. Definition

• *ngIf: A structural directive that dynamically adds or removes elements from the DOM based on a boolean condition.
• hidden: A standard HTML attribute that uses CSS to hide elements without removing them from the DOM.

2. Behavior

• *ngIf:
  • Removes the element and its child elements from the DOM when the condition evaluates to false.
  • Re-inserts the element into the DOM when the condition changes to true.
• hidden:
  • Applies display: none to the element when the condition evaluates to true.
  • The element remains in the DOM but is visually hidden from the user.

3. Performance

• *ngIf:
  • Offers better rendering performance since it removes elements from the DOM entirely when not needed.
  • Comes with the overhead of destroying and recreating elements when the condition changes.
• hidden:
  • Provides faster toggling because it only modifies the CSS property without altering the DOM structure.
  • May consume more memory if many elements are hidden, as they still exist in the DOM.

4. Use Cases

• *ngIf:
  • Ideal for scenarios where the element and its resources (e.g., event listeners, bindings) should be completely removed when not needed.
  • Useful for conditional rendering when the element doesn’t need to exist at all.
• hidden:
  • Best suited for toggling visibility while retaining the element’s state and presence in the DOM.
  • Useful for scenarios like modal dialogs or animations, where the element’s DOM structure is still required.

5. Example

• Using *ngIf:

  <div *ngIf="isVisible">
    This content is visible based on `*ngIf`.
  </div>
  

  • In this case, the <div> is completely removed from the DOM when isVisible is false.

• Using hidden:

  <div [hidden]="!isVisible">
    This content is visible based on `hidden`.
  </div>
  

  • Here, the <div> remains in the DOM but becomes invisible when isVisible is false.

6. Key Points

• Event Listeners and State:
  • With *ngIf, event listeners and internal states are destroyed and recreated whenever the element is removed and added back.
  • With hidden, the element’s state and event listeners are preserved.
• SEO and Accessibility:
  • *ngIf removes the element entirely, which can impact screen readers and search engine crawlers.
  • hidden hides the element visually but keeps it accessible in some contexts, which may be beneficial for screen readers.

When to Use

• Use *ngIf when performance and memory optimization are priorities, or when the element’s existence depends on the condition.
• Use hidden when toggling visibility without removing the element is sufficient, and preserving state or event listeners is important.