feat(compiler): Add support for multiple conditions for cases in switch control flow #58600

wartab · 2024-11-11T21:30:30Z

Currently, the @switch/@case syntax is fairly limited, as cases may only have one guard. This often requires to either copy paste the body of the case-block or to refactor code to use @if / @else if syntax instead. This adds support for the highly requested feature of being able to define multiple guards to a single @case using the syntax @case(a; b; c)

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines: https://github.com/angular/angular/blob/main/CONTRIBUTING.md#commit
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

Bugfix
Feature
Code style update (formatting, local variables)
Refactoring (no functional changes, no api changes)
Build related changes
CI related changes
Documentation content changes
angular.dev application / infrastructure changes
Other... Please describe:

What is the current behavior?

You can't have multiple conditions in a single case block.

Issue Number: #14659

What is the new behavior?

Now you can

Does this PR introduce a breaking change?

Yes
No

Other information

I'm not certain if other tests are needed.

I made a few tests building this locally and this all works:

@Component({
  selector: 'app-root',
  standalone: true,
  template: `@switch (myVar) {
  @case (1; 2) {
    <div>{{myVar}}</div>
  }

  @default {
    <div>Default {{myVar}}</div>
  }
}
`,
  styleUrl: './app.component.scss'
})
export class AppComponent {
  myVar: number = 2; // replace by whatever you want

  public addOne() {
    this.myVar++;
  }
}

This does accurately not compile:

@Component({
  selector: 'app-root',
  standalone: true,
  template: `@switch (myVar) {
    @case (1) {
      <div>{{myVar}}</div>
    }

    @case (2; 3) {
      <div>{{myVar}}</div>
    }

    @default {
      <div>Default {{myVar}}</div>
    }
}
`,
  styleUrl: './app.component.scss'
})
export class AppComponent {
  myVar: 1 | 2 = 1;

  public addOne() {
    this.myVar++;
  }
}


Application bundle generation failed. [0.065 seconds]

X [ERROR] NG8: Type '3' is not comparable to type '1 | 2'. [plugin angular-compiler]

    src/app/app.component.ts:11:14:
      11 │     @case (2; 3) {
         ╵               ^

@case

…ch control flow Currently, the @switch/@case syntax is fairly limited, as cases may only have one guard. This often requires to either copy paste the body of the case-block or to refactor code to use @if / @else if syntax instead. This adds support for the highly requested feature of being able to define multiple guards to a single @case using the syntax @case(a; b; c)

wartab · 2024-11-11T21:40:50Z

Also, I tried to implement the following syntax:

@case(1)
@case(2) {
...
}

But that was just way too difficult to do, as the BlockStart structure just wasn't flexible enough to allow for it easily. Nonetheless, I'll give it a try if it's preferred.

JeanMeche · 2024-11-11T22:06:45Z

I see at least 2 types of tests that we would need to add.

Compliance tests in packages/compiler-cli/test/compliance/test_cases/, those tests ensure we don't introduce regressions on the compiler output.
runtime tests in packages/core/test/render3/

josephperrott

LGTM

Reviewed-for: dev-infra

Add test

wartab · 2024-11-18T23:48:35Z

Took me a while to understand how the compiler tests work, but I did add a compliance test. I couldn't really think of anything that isn't already covered with other tests, but please hint me in the right direction if you think there need to be more tests.

That said, when it comes to runtime tests, I tried to find examples where you cited them, but I couldn't find any control flow related tests there.
Tests there seem to be testing more higher level things in the framework itself. I'm not opposed to adding tests, but given I'm not very experienced with the compiler when it comes to Angular internals, I feel more confident when I can base my work on already exisitng examples.

wartab · 2024-11-18T23:53:27Z

Also on a side note, I'm pretty impressed that the minimizer can optimise ternary expressions so well,

The a === 0 ? .... : a=== 2 chain actually gets optimised to a===0||a===1||a===2

I think one step could be to actually generate switch/case expressions, but that - again :( - seems to be a whole different beast for me.

wartab · 2025-05-28T20:08:24Z

I just noticed that this PR got marked as draft. I assume it's because of the merge conflicts with main.

I know that this PR was not solicitted by the Angular team, so I'm not sure if there's any chance this PR gets accepted if I update the PR to be compatible with the current main branch. Could you please let me know if I should try to update the PR or just drop it?

thePunderWoman · 2025-06-03T11:00:45Z

@wartab We went through and marked all old PRs that haven't moved to draft. If you'd like to see this move forward though, please update and get it to a fresh reviewable state and we'll revisit.

wartab · 2025-06-03T11:11:15Z

Given this isn't a trivial change, I'd just like to know if spending time on this even makes sense. I want this feature to be added, I want to help to make it happen, but for that I'd also like to know if there's a chance this will be accepted if I re-implement the feature and the tests. I say this because I didn't get a response to my question regarding tests and so the PR just ended up being in conflict over time.

thePunderWoman · 2025-06-04T17:00:14Z

@wartab There was a conversation about this and the answer was that we do want this feature, but I think there were concerns about this implementation. So with that, it's probably best to close this for now. I know @alxhub has more thoughts here and I'll leave it to him to provide his thoughts. Thank you though! It's a great feature and we appreciate you for your effort.

wartab · 2025-06-04T17:11:30Z

@thePunderWoman Thank you for your honesty. Just fyi, when you changed the PRs to drafts, I didn't get a notification, so people might miss that it happened.

angular-automatic-lock-bot · 2025-07-05T00:13:35Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

pullapprove bot requested review from JoostK, alxhub and josephperrott November 11, 2024 21:30

angular-robot bot added detected: feature PR contains a feature commit area: compiler Issues related to `ngc`, Angular's template compiler labels Nov 11, 2024

ngbot bot added this to the Backlog milestone Nov 11, 2024

wartab force-pushed the multiple-switch-cases branch from c66b7d4 to 7954fb8 Compare November 11, 2024 21:33

angular-robot bot added area: compiler Issues related to `ngc`, Angular's template compiler and removed area: compiler Issues related to `ngc`, Angular's template compiler labels Nov 11, 2024

josephperrott approved these changes Nov 12, 2024

View reviewed changes

alxhub self-assigned this Nov 14, 2024

Multiple switch cases tests (#1)

812eca5

Add test

angular-robot bot added area: compiler Issues related to `ngc`, Angular's template compiler and removed area: compiler Issues related to `ngc`, Angular's template compiler labels Nov 18, 2024

ngbot bot modified the milestone: Backlog Nov 18, 2024

thePunderWoman marked this pull request as draft May 21, 2025 15:30

thePunderWoman closed this Jun 4, 2025

angular-automatic-lock-bot bot locked and limited conversation to collaborators Jul 5, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(compiler): Add support for multiple conditions for cases in switch control flow #58600

feat(compiler): Add support for multiple conditions for cases in switch control flow #58600

Uh oh!

wartab commented Nov 11, 2024

Uh oh!

wartab commented Nov 11, 2024

Uh oh!

JeanMeche commented Nov 11, 2024

Uh oh!

josephperrott left a comment

Uh oh!

wartab commented Nov 18, 2024

Uh oh!

wartab commented Nov 18, 2024 •

edited

Loading

Uh oh!

wartab commented May 28, 2025

Uh oh!

thePunderWoman commented Jun 3, 2025

Uh oh!

wartab commented Jun 3, 2025

Uh oh!

thePunderWoman commented Jun 4, 2025

Uh oh!

wartab commented Jun 4, 2025

Uh oh!

angular-automatic-lock-bot bot commented Jul 5, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

feat(compiler): Add support for multiple conditions for cases in switch control flow #58600

feat(compiler): Add support for multiple conditions for cases in switch control flow #58600

Uh oh!

Conversation

wartab commented Nov 11, 2024

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

Uh oh!

wartab commented Nov 11, 2024

Uh oh!

JeanMeche commented Nov 11, 2024

Uh oh!

josephperrott left a comment

Choose a reason for hiding this comment

Uh oh!

wartab commented Nov 18, 2024

Uh oh!

wartab commented Nov 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wartab commented May 28, 2025

Uh oh!

thePunderWoman commented Jun 3, 2025

Uh oh!

wartab commented Jun 3, 2025

Uh oh!

thePunderWoman commented Jun 4, 2025

Uh oh!

wartab commented Jun 4, 2025

Uh oh!

angular-automatic-lock-bot bot commented Jul 5, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

wartab commented Nov 18, 2024 •

edited

Loading