Comprehensive Analysis and Practical Application of *ngIf else Syntax in Angular

Overview of Angular Conditional Rendering Mechanism

As a representative of modern frontend frameworks, Angular's template system provides powerful conditional rendering capabilities. The *ngIf directive, as a core structural directive, introduced else syntax extensions in Angular version 4, significantly enhancing the flexibility and readability of template expressions. Conditional rendering not only involves UI-level display and hiding but also relates to deep technical considerations such as component lifecycle and performance optimization.

Fundamental Syntax Analysis of *ngIf else

Traditional conditional rendering approaches typically require writing two separate *ngIf directives to achieve mutually exclusive display:

<div *ngIf="isValid">
  Valid content area
</div>

<div *ngIf="!isValid">
  Alternative content area
</div>

This implementation approach exhibits obvious redundancy issues and lacks intuitive logical expression. By introducing else syntax, more elegant conditional branching can be achieved:

<div *ngIf="isValid; else other_content">
  Valid content area
</div>

<ng-template #other_content>
  Alternative content area
</ng-template>

In this syntax structure, the else keyword is followed by a template reference variable pointing to an ng-template element. When the conditional expression isValid evaluates to false, Angular automatically renders the corresponding template content.

Advanced Applications of then else Combined Syntax

To further enhance template organization, Angular provides then else combined syntax:

<div *ngIf="isValid; then content else other_content">
  This area content will be ignored
</div>

<ng-template #content>
  Main content template
</ng-template>

<ng-template #other_content>
  Alternative content template
</ng-template>

This syntax pattern completely separates conditional logic from content presentation, improving template maintainability. It also supports using then syntax independently:

<div *ngIf="isValid; then content"></div>
<ng-template #content>Main content template</ng-template>

In-depth Analysis of ng-template Mechanism

ng-template is Angular's customized implementation of the HTML5 template element, with its core feature being deferred rendering mechanism. According to MDN specification definition, the template element is used to store client-side content that is not rendered when the page loads but can be instantiated at runtime through JavaScript.

In Angular's template system, ng-template plays the role of a virtual container. Its content is not directly output to the DOM during compilation but is stored in memory as template fragments. Only when conditions are met or explicitly referenced does Angular instantiate its content and insert it into the document flow.

Implementation Principles Behind Syntactic Sugar

Angular's *ngIf syntax is essentially syntactic sugar, with its underlying implementation based on property binding mechanism. When the compiler encounters the *ngIf directive, it performs the following transformation:

<!-- Syntactic sugar form -->
<div *ngIf="isValid">Content</div>

<!-- Transformed form -->
<ng-template [ngIf]="isValid">
  <div>Content</div>
</ng-template>

This transformation mechanism also applies to else and then syntax:

<ng-template [ngIf]="isValid" [ngIfElse]="other_content">
  <div>Main content</div>
</ng-template>

Container-less Wrapping Strategy with ng-container

To avoid introducing unnecessary DOM elements, Angular provides ng-container as a logical container:

<ng-container *ngIf="isLoggedIn; then loggedIn; else loggedOut">
</ng-container>

ng-container does not generate actual DOM nodes during rendering, serving only as a logical grouping tool, particularly suitable for scenarios requiring conditional rendering without additional wrapping elements.

Performance Optimization Considerations for Conditional Rendering

*ngIf and [hidden] attribute have fundamental differences in implementing show/hide functionality. *ngIf achieves conditional rendering by completely creating or destroying DOM nodes, while [hidden] controls visibility only through CSS styles:

<!-- Node destruction and reconstruction -->
<div *ngIf="isVisible">Dynamic content</div>

<!-- CSS hiding preservation -->
<div [hidden]="!isVisible">Static content</div>

In performance-sensitive scenarios, appropriate solutions need to be selected based on specific requirements. For frequent visibility toggling with heavy content, [hidden] might be preferable; for highly dynamic content or when component lifecycle triggering is needed, *ngIf is more suitable.

Processing Strategies for Complex Conditional Expressions

Angular supports using complex JavaScript expressions in *ngIf, including logical operators, function calls, etc.:

<div *ngIf="user?.isActive && user?.permissions?.includes('admin')">
  Admin exclusive content
</div>

For overly complex conditional logic, it's recommended to define computed properties or methods in the component class to maintain template simplicity:

// In component class
get shouldShowAdminContent(): boolean {
  return this.user?.isActive && 
         this.user?.permissions?.includes('admin');
}

// In template
<div *ngIf="shouldShowAdminContent">Admin content</div>

Practical Application Scenarios and Best Practices

In user authentication scenarios, *ngIf else syntax can clearly express branch logic for login status:

<div *ngIf="isLoggedIn; else loginPrompt">
  <h3>Welcome back, {{userName}}</h3>
  <!-- User exclusive content -->
</div>

<ng-template #loginPrompt>
  <div class="login-container">
    <button (click)="showLogin()">Login Now</button>
    <p>Enjoy full services after login</p>
  </div>
</ng-template>

This pattern not only provides clear code structure but also facilitates subsequent maintenance and extension. When new state branches need to be added, only corresponding template references need to be included.

Template Variables and Local State Management

Angular allows declaring local variables in *ngIf directives for accessing conditional expression results within templates:

<div *ngIf="user$ | async as user; else loading">
  User information: {{user.name}}
</div>

<ng-template #loading>
  Data loading...
</ng-template>

This pattern is particularly useful when combined with Observable and async pipe, effectively managing state display for asynchronous data streams.

Conclusion and Future Outlook

The *ngIf else syntax, as a core feature of Angular's template system, provides powerful conditional rendering capabilities through concise syntax. From basic mutually exclusive display to complex multi-state management, this syntax system can deliver elegant solutions. Understanding the underlying ng-template mechanism and syntactic sugar transformation principles helps developers write more efficient and maintainable Angular applications. As Angular versions continue to evolve, conditional rendering-related features are constantly being enriched and improved, providing more possibilities for frontend development.