In Angular 17, built-in control flow syntax was added as a preferred component template feature.
This allows for sections of templates to change from something like:
<div *ngIf="condition; else #alternate">
<example-content-1 />
</div>
<ng-template #alternate>
<example-content-2 />
</ng-template>
to the new syntax:
@if(condition) {
<example-content-1 />
} @else {
<example-content-2 />
}
I like this syntax and for the for control flow specifically performance appears to be much improved over *ngFor, however, I have not found a formatter that spaces inner content of the new control flow blocks away from the block opening and closing braces resulting in more crowded template design like:
<out-of-flow-content></out-of-flow-content>
@for (item of items; track item.id){
<inner-content-1></inner-content-1>
}
<out-of-flow-content-2></out-of-flow-content-2>
Is there a formatter for Visual Studio Code with the option to space inner content away from the new control flow syntax, or should I turn off format on save and hope for a future solution
I have looked through the commonly recommended formatters for Angular development in VS Code (prettier, various Angular formatters that all seem to be abandoned, standard HTML formatting) and none seem to have an option that spaces content after entering a new control-flow block