control flow is adding unnecessary whitespace about angular HOT 5 CLOSED

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

from angular.

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

from angular.

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

from angular.

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

from angular.

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.

from angular.