Beyond `ngSwitch`: Alternative Approaches for Two-Value Conditional Rendering in Angular

While ngSwitch is a versatile directive for conditional rendering based on a switch expression, it has a limitation: it can only exactly match a single case value. If you need to handle two specific values, here are common workarounds:

• Chained ngIf within a Case: Place an ngIf directive inside an ngSwitchCase to check for one of the two desired values. If it matches, the content within that ngIf will be rendered:

<ng-container *ngSwitch="myValue">
  <ng-container *ngSwitchCase="'value1'">
    <p>Matched value1</p>
  </ng-container>
  <ng-container *ngSwitchCase="'value2'">
    <p>Matched value2</p>
  </ng-container>
  <ng-container *ngSwitchDefault>
    </ng-container>
</ng-container>

• switch(true) with Conditional Logic: Use switch(true) along with regular conditional statements for more complex matching:

<ng-container *ngSwitch="true">
  <ng-container *ngIf="myValue === 'value1'">
    <p>Matched value1</p>
  </ng-container>
  <ng-container *ngIf="myValue === 'value2'">
    <p>Matched value2</p>
  </ng-container>
  <ng-container *ngSwitchDefault>
    </ng-container>
</ng-container>

New @switch Syntax (Angular 17 and Later)

Angular 17 introduced the @switch template expression, offering a more concise and readable alternative for conditional rendering based on switch statements:

<div *ngTemplateOutlet="getTemplate(myValue)">
  <ng-template [ngTemplateOutlet]="caseTemplate" *ngSwitchCase="'value1'">
    <p>Matched value1</p>
  </ng-template>
  <ng-template [ngTemplateOutlet]="caseTemplate" *ngSwitchCase="'value2'">
    <p>Matched value2</p>
  </ng-template>
  <ng-template #caseTemplate>
    </ng-template>
</div>

In this approach:

• *ngTemplateOutlet="getTemplate(myValue)": Calls a function to dynamically determine which template to render based on myValue.
• *ngSwitchCase: Individual cases for 'value1' and 'value2'.
• #caseTemplate: Defines a shared template (optional) for common content across cases.

Example Codes for Two Switch Case Values in Angular

Chained ngIf within a Case:

<div [ngSwitch]="myValue">
  <div *ngSwitchCase="'value1'">
    <p *ngIf="myValue === 'value1'">Matched value1</p>
  </div>
  <div *ngSwitchCase="'value2'">
    <p *ngIf="myValue === 'value2'">Matched value2</p>
  </div>
  <div *ngSwitchDefault>
    </div>
</div>

switch(true) with Conditional Logic:

<div [ngSwitch]="true">
  <div *ngIf="myValue === 'value1'">
    <p>Matched value1</p>
  </div>
  <div *ngIf="myValue === 'value2'">
    <p>Matched value2</p>
  </div>
  <div *ngSwitchDefault>
    </div>
</div>

<div *ngTemplateOutlet="getTemplate(myValue)">
  <ng-template [ngTemplateOutlet]="caseTemplate" *ngSwitchCase="'value1'">
    <p>Matched value1</p>
  </ng-template>
  <ng-template [ngTemplateOutlet]="caseTemplate" *ngSwitchCase="'value2'">
    <p>Matched value2</p>
  </ng-template>
  <ng-template #caseTemplate>
    </ng-template>
</div>

getTemplate(value: string) {
  switch (value) {
    case 'value1':
    case 'value2':
      return caseTemplate;
    default:
      return defaultTemplate; // Optional default template
  }
}

Create an object where the keys are the switch case values and the values are the template references or logic to be executed. Then, use an ngIf directive to conditionally render based on the value retrieved from the object.

const valueMap = {
  'value1': caseTemplate1,
  'value2': caseTemplate2
};

<div *ngIf="valueMap[myValue]">
  <ng-container *ngTemplateOutlet="valueMap[myValue]"></ng-container>
</div>

Custom Directive:

Develop a custom directive that takes the switch expression and the two desired values as inputs. The directive can handle the logic for matching and rendering the appropriate content. This approach can be useful for complex conditional rendering scenarios.

Helper Function with Conditional Logic:

Create a helper function that takes the switch expression value as input. Inside the function, use conditional statements (like if or else if) to check for the two specific values and return the corresponding template reference.

<div *ngTemplateOutlet="getTemplate(myValue)">
</div>

getTemplate(value: string) {
  if (value === 'value1') {
    return caseTemplate1;
  } else if (value === 'value2') {
    return caseTemplate2;
  } else {
    // Optional default template
    return defaultTemplate;
  }
}

Choosing the Right Method:

• For simple cases with two values: The chained ngIf within a case or switch(true) with conditional logic might be sufficient.
• For better code organization when dealing with multiple values or complex logic: Consider the object lookup table or custom directive approaches.
• For improved maintainability with reusable logic: The helper function with conditional logic could be a good choice.