Equivalent Methods for Conditional Element Display in Angular 2+: From ngShow/ngHide to *ngIf and [hidden]

Introduction

During the migration from AngularJS to Angular 2+, developers frequently encounter the fundamental challenge of implementing conditional display functionality. While AngularJS's ngShow and ngHide directives provided convenient element visibility control, these have been replaced by more modern and powerful alternatives in Angular 2+.

*ngIf Directive: Conditional DOM Manipulation

*ngIf is the most commonly used structural directive in Angular 2+ for conditionally adding or removing elements from the DOM. Its operation mechanism involves evaluating boolean expressions to determine whether target elements should be rendered.

// Component class definition
export class VisibilityComponent {
  isContentVisible = true;
  
  toggleVisibility() {
    this.isContentVisible = !this.isContentVisible;
  }
}

<!-- Using *ngIf in template -->
<button (click)="toggleVisibility()">Toggle Visibility</button>
<div *ngIf="isContentVisible">
  This content appears in DOM when isContentVisible is true
</div>

When the condition expression evaluates to true, the element and its children are added to the DOM tree; when the condition is false, the entire element subtree is completely removed from the DOM. This mechanism ensures that no browser resources are consumed when elements are not visible.

[hidden] Property: CSS-Level Visibility Control

As an alternative conditional display approach, the [hidden] property binding controls element visibility by manipulating the CSS display property without modifying the DOM structure.

<div [hidden]="!isContentVisible">
  This content is visible when isContentVisible is true
</div>

This method only modifies the element's display style while the element itself remains in the DOM at all times. It's important to note that the behavior of the [hidden] property depends on the browser's native implementation of the HTML5 hidden attribute.

Key Differences and Selection Considerations

DOM Manipulation and Performance Impact

*ngIf actually modifies the DOM structure, completely removing elements when conditions are false. This means:

• Reduced memory usage and browser rendering burden
• Destruction of element-related listeners and component instances
• Re-initialization required when redisplaying

In contrast, [hidden] only hides elements via CSS:

• Elements always remain in the DOM
• Component state and event listeners are preserved
• May impact page performance, especially with numerous hidden elements

CSS Priority Conflicts

When using the [hidden] property, CSS style conflicts may occur. Since the hidden attribute has lower priority than explicitly set CSS rules, elements may not hide correctly in certain scenarios.

/* CSS rules that may cause [hidden] to fail */
.custom-element {
  display: block !important;
}

To address this issue, global styles can be added to ensure hidden attribute priority:

[hidden] {
  display: none !important;
}

Attribute Binding Considerations

When using [hidden] property binding, correct attribute value passing must be ensured. Incorrect binding syntax can lead to unexpected behavior.

<!-- Incorrect usage -->
<div hidden="false">Content remains hidden</div>
<div hidden="{{false}}">Content remains hidden</div>

<!-- Correct usage -->
<div [hidden]="false">Content visible</div>

The first two approaches assign the string "false" to the hidden attribute, and any non-empty string value in HTML is considered truthy, thus keeping the element permanently hidden. Only property binding syntax [hidden] correctly passes boolean values.

Practical Application Scenarios Analysis

Situations Suitable for *ngIf

• Elements containing heavyweight components or complex logic
• Need to optimize page performance by reducing DOM node count
• Infrequent changes in element display state
• No requirement to maintain element state or form data

Situations Suitable for [hidden]

• Lightweight elements requiring frequent visibility toggling
• Need to preserve element state and form data
• Elements participating in CSS animations or transitions
• Integration with third-party libraries requiring persistent DOM presence

Advanced Alternative Approaches

Beyond *ngIf and [hidden], developers can consider using [style.display] binding for more granular display control.

<div [style.display]="isContentVisible ? 'block' : 'none'">
  Display control through style binding
</div>

This approach offers maximum flexibility, allowing developers to specify exact display values, but requires manual management of style logic.

Best Practice Recommendations

Select appropriate conditional display solutions based on project requirements: For most scenarios, *ngIf is the preferred choice due to its superior performance and resource management. Consider the [hidden] property only when maintaining DOM element state is absolutely necessary. Regardless of the chosen method, ensure code consistency and maintainability by avoiding mixed usage of multiple conditional display strategies within the same project.