Skip to content

Prettier adds a colon after 'track' #15784

@DiogoLopes99

Description

@DiogoLopes99

Prettier 3.1.1
Playground link

--parser babel

Input:

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { UntilDestroy } from "@ngneat/until-destroy";

@UntilDestroy()
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: "example",
  template: `
    @for (item of items; let i = $index; track block) {}
  `,
})
export class Example {
  constructor() {}

  ngOnInit() {}

  ngAfterViewInit() {}

  ngOnChanges() {}

  ngOnDestroy() {}
}

Output:

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { UntilDestroy } from "@ngneat/until-destroy";

@UntilDestroy()
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: "example",
  template: `
    @for (item of items; let i = $index; track: block) {}
  `,
})
export class Example {
  constructor() {}

  ngOnInit() {}

  ngAfterViewInit() {}

  ngOnChanges() {}

  ngOnDestroy() {}
}

Expected behavior:
I was expecting no changes to the Input code, but Prettier adds a colon after 'track' , which is invalid syntax for Angular 17's control flow

Metadata

Metadata

Assignees

No one assigned

    Labels

    lang:angularIssues affecting Angular template (not general JS/TS issues used for Angular)locked-due-to-inactivityPlease open a new issue and fill out the template instead of commenting.

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions