Control flow - template used in multiple else clauses

[kbrilla]

Which @angular/* package(s) are relevant/related to the feature request?

No response

Description

When the same template is used in multiple*ngIf else clauses then te code is incorectly migrated

<div *ngIf="hasPermission; else noPermission">presentation</div>
<div *ngIf="someOtherPermission; else noPermission">presentation</div>
<ng-template #noPermission>
  <div>Imagine more than just some text</div>
</ng-template>

@if (hasPermission) {
<div>presentation</div>
} @else {

  <div>Imagine more than just some text</div>

}
@if (someOtherPermission) {
<div>presentation</div>
} @else {
#noPermission|
}
<ng-template #noPermission>
  <div>Imagine more than just some text</div>
</ng-template>

Proposed solution

1. Use <ng-container *ngTemplateOutlet="noPermission"> and leave <ng-template #noPermission>

Alternatives considered

2. Just duplicate template code and remove template

Not sure which is better so mayby allow for interactive migration and let user decide? Or at least flag for user preference.

[kbrilla]

One more thing to consider, when template is used in both else clause and for ngTemplateOutlet then code inside tempalte is duplicated as well - so mayby here also flag or interactive migration could come in handy

@if (hasPermission) {
<div>presentation</div>
} @else {

  <div>Imagine more than just some text</div>

}
<ng-container *ngTemplateOutlet="noPermission"></ng-container>
<ng-template #noPermission>
  <div>Imagine more than just some text</div>
</ng-template>

[jessicajaniuk]

Thanks for reporting this! There's a fix in #52863.

[angular-automatic-lock-bot]

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.}