[prefer-self-closing-tags] Conflicts with new control flow and custom selectors

[aam-antonio]

Description and reproduction of the issue
When I use the control flow @for () inside a custom component, the rule detects that the container is empty and self closes the component removing all content.

{
  "rules": {
    "@angular-eslint/template/prefer-self-closing-tags": ["error"]
  }
}

<app-my-menu>
  @for (item of someArray) {
    <app-my-menu-item>{{ item.text }}</app-my-menu-item>
  }
</app-my-menu>

After fix this is the result:

<app-my-menu />

Versions

package	version
@angular-eslint/eslint-plugin-template	17.1.0
@angular-eslint/template-parser	17.1.0
@typescript-eslint/parser	6.12.0
ESLint	8.54.0
node	20.9.0

# Please run `npx ng version` in your project and paste the full output here:

• I have tried restarting my IDE and the issue persists.
• I have updated to the latest supported version of the packages and checked my ng version output per the instructions given here.

[json-derulo]

Your code is invalid, the for loop is missing a track expression, see the docs. Your code throws a build error:

✘ [ERROR] NG5002: @for loop must have a "track" expression [plugin angular-compiler]

When adding a track expression like the following, there is no lint error and the fixer won't remove anything:

<app-my-menu>
  @for (item of someArray; track item) {
    <app-my-menu-item>{{ item.text }}</app-my-menu-item>
  }
</app-my-menu>