Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Control flow - template used in multiple else clauses #52854

Closed
kbrilla opened this issue Nov 13, 2023 · 3 comments
Closed

Control flow - template used in multiple else clauses #52854

kbrilla opened this issue Nov 13, 2023 · 3 comments
Assignees
Labels
area: migrations Issues related to `ng update` migrations core: control flow Issues related to the built-in control flow (@if, @for, @switch)
Milestone

Comments

@kbrilla
Copy link

kbrilla commented Nov 13, 2023

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

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

@pkozlowski-opensource pkozlowski-opensource added area: migrations Issues related to `ng update` migrations core: control flow Issues related to the built-in control flow (@if, @for, @switch) labels Nov 13, 2023
@ngbot ngbot bot added this to the needsTriage milestone Nov 13, 2023
@kbrilla
Copy link
Author

kbrilla commented Nov 13, 2023

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 jessicajaniuk self-assigned this Nov 13, 2023
jessicajaniuk pushed a commit to jessicajaniuk/angular that referenced this issue Nov 13, 2023
This should fix the issue where if the same ng-template is used with multiple if / else statements, it replaces all usages properly.
fixes: angular#52854
@jessicajaniuk
Copy link
Contributor

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

jessicajaniuk pushed a commit that referenced this issue Nov 13, 2023
#52863)

This should fix the issue where if the same ng-template is used with multiple if / else statements, it replaces all usages properly.
fixes: #52854

PR Close #52863
tbondwilkinson pushed a commit to tbondwilkinson/angular that referenced this issue Dec 6, 2023
angular#52863)

This should fix the issue where if the same ng-template is used with multiple if / else statements, it replaces all usages properly.
fixes: angular#52854

PR Close angular#52863
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Dec 14, 2023
ChellappanRajan pushed a commit to ChellappanRajan/angular that referenced this issue Jan 23, 2024
angular#52863)

This should fix the issue where if the same ng-template is used with multiple if / else statements, it replaces all usages properly.
fixes: angular#52854

PR Close angular#52863
rlmestre pushed a commit to rlmestre/angular that referenced this issue Jan 26, 2024
angular#52863)

This should fix the issue where if the same ng-template is used with multiple if / else statements, it replaces all usages properly.
fixes: angular#52854

PR Close angular#52863
amilamen pushed a commit to amilamen/angular that referenced this issue Jan 26, 2024
angular#52863)

This should fix the issue where if the same ng-template is used with multiple if / else statements, it replaces all usages properly.
fixes: angular#52854

PR Close angular#52863
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area: migrations Issues related to `ng update` migrations core: control flow Issues related to the built-in control flow (@if, @for, @switch)
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants