control flow is adding unnecessary whitespace

[sonikasharma1403]

Which @angular/* package(s) are the source of the bug?

common

Is this a regression?

Yes

Description

After migrating to the new control flow syntax, we have noticed that it adds whitespace in the DOM, which can cause issues. In the Stackblitz example below, the ngFor syntax does not add any extra space after the alphabet, whereas the new control flow syntax adds an extra space when displaying the alphabets.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-ecubsf?file=src%2Fnew-syntax.component.ts

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

latest

Anything else?

No response

[JeanMeche]

Your @for doesn't use any element by default where the ngFor directive did.

The equivalent of @for (part of parts; track part) is <ng-container *ngFor="let part of parts"> which exhibits the same issue.

You're probably looking for something like:

  @for (part of parts; track part) {
    <span{{part}}</span>
  }

[sonikasharma1403]

@JeanMeche, stackblitz includes the ng-container with ngFor too, but it is not adding any whitespace

[JeanMeche]

What you're seeing is related to the preserveWhitespace option, it's better to keep it on.
To drop any whitespace, you can resort to the comment block trick.

  @for (part of parts; track part) {<!--
  -->{{part}}<!--
  -->}

[sonikasharma1403]

Since, we ran migrator on our entire codebase, it is difficult to add comment block trick or span wrappers. Will check out the preserveWhitespace option

[thePunderWoman]

So HTML doesn't care about whitespace between HTML elements, but it does in between text nodes. It'll collapse multiple spaces between text nodes into a single whitespace when rendered. So this is happening because the for loop is rendering over multiple text nodes.

The migration auto formatting isn't perfect and can't account for every use case. This seems to be a very rare one. So my suggestion is to just disable the auto formatting for targeted files with this sort of syntax. You'll likely still have some whitespace issues, but it may resolve this one. Detecting this kind of use case would be complicated and the amount of effort to address this rare use case would be high. So I'm going to close this for now since there's workarounds.

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