No lint warnings for signals used within control flow. #59394
Description
Which @angular/* package(s) are relevant/related to the feature request?
No response
Description
@for (breadcrumb of breadcrumbs(); track breadcrumb.name; let i = $index) {
<div class="breadcrumb">
@if (breadcrumb.linkPath) {
<a class="breadcrumb--link" [routerLink]="[breadcrumb.linkPath]"> {{ breadcrumb.name }}</a>
} @else {
<div class="breadcrumb--disabled">
{{ breadcrumb.name }}
</div>
}
@if **(i < breadcrumbs.length - 1)** {
<inm-icon [name]="'ChevronRight'" [size]="'x-small'"></inm-icon>
}
</div>
}
There currently are no lint warnings for i < breadcrumbs.length - 1, my workaround ended up being:
@if (breadcrumbs()?.length; as breadCrumbsLength) {
@if (breadcrumbs(); as breadcrumbs) {
<div class="breadcrumb-ct">
@for (breadcrumb of breadcrumbs; track breadcrumb.name; let i = $index) {
<div class="breadcrumb">
@if (breadcrumb.linkPath) {
<a class="breadcrumb--link" [routerLink]="[breadcrumb.linkPath]"> {{ breadcrumb.name }}</a>
} @else {
<div class="breadcrumb--disabled">
{{ breadcrumb.name }}
</div>
}
@if (i < breadCrumbsLength - 1) {
<inm-icon [name]="'ChevronRight'" [size]="'x-small'"></inm-icon>
}
</div>
}
</div>
}
}
As directly using i < breadcrumbs()?.length - 1 receives a linting error of object undefined, even if it's nested within an if statement here:
@if (breadcrumbs() && breadcrumbs()?.length) {
<div class="breadcrumb-ct">
@for (breadcrumb of breadcrumbs(); track breadcrumb.name; let i = $index) {
<div class="breadcrumb">
@if (breadcrumb.linkPath) {
<a class="breadcrumb--link" [routerLink]="[breadcrumb.linkPath]"> {{ breadcrumb.name }}</a>
} @else {
<div class="breadcrumb--disabled">
{{ breadcrumb.name }}
</div>
}
@if (i < breadcrumbs()?.length - 1) {
<inm-icon [name]="'ChevronRight'" [size]="'x-small'"></inm-icon>
}
</div>
}
</div>
}
Proposed solution
To still have linting errors if invoking signals within nested @if and @for statenents.
Alternatives considered
n/a