Type narrowing for `NgSwitch` and `NgSwitchCase`

[chuckjaz]

Current behavior

No type narrowing is performed when using NgSwitch and NgSwitchCase.

Expected behavior

Narrow the types used in the NgSwitchCase based on the selection criteria.

See #17953 (comment) and following for more details.

[dirkluijk]

Looking forward to see type guard support in language-service as well!

My simple use case:

interface Animal {
  type: 'fish' | 'bird';
}

interface Fish extends Animal {
  type: 'fish';
  foo: string;
}

interface Bird extends Animal {
  type: 'bird';
  bar: string;
}

@Component({})
class MyComponent {
  animal: Animal;

  isFish(animal: Animal): animal is Fish {
    return animal.type === 'fish';
  }

  isBird(animal: Animal): animal is Bird {
    return animal.type === 'bird';
  }
}

Use case 1

<app-fish *ngIf="isFish(animal)" [foo]="animal.foo"></app-fish>
<app-bird *ngIf="isBird(animal)" [bar]="animal.bar"></app-bird>

Use case 2

<ng-container [ngSwitch]="true">
  <app-fish *ngSwitchCase="isFish(animal)"></app-fish>
  <app-bird *ngSwitchCase="isBird(animal)"></app-bird>
</ng-container>

Are both use cases covered?

[waterplea]

This would be a great addition, having an issue similar to case 2 that @dirkluijk posted.

[amitport]

@chuckjaz any updates? Anyone working on this? Thanks

[dirkluijk]

Will this be solved in Ivy?

[SchnWalter]

No, this isn't solved by Ivy, if anything, Ivy will cause more people to realize how badly they need ngSwitch to support type narrowing.

[klemenoslaj]

This would really clean up a lot of template code. How come this is such a low priority?