Angular Control Syntax issues

[rickvandermeij-aanzee]

After using the new Angular Control Syntax, prettier does not always indent correctly.

sometimes it works, sometimes it doesnt, but i cannot pinpoint why.

@if (mealType !== 'lodging' && !package) {
<span class="mx-0.5 text-base font-normal sm:text-lg"> + </span>
@switch (mealType.toLowerCase()) { @case ('breakfast') {
<svg-icon
	class="h-6 w-6 grow-0 text-dark-primary"
	data-test-id="breakfast-icon"
	src="assets/icons/icon-coffee-cup.svg"
/>
} @case ('halfboard') {
<svg-icon
	class="h-6 w-6 grow-0 text-dark-primary"
	data-test-id="halfboard-icon"
	src="assets/icons/icon-fork-knife.svg"
/>
} @default {
<svg-icon
	class="h-6 w-6 grow-0 text-dark-primary"
	data-test-id="fullboard-allin-icon"
	src="assets/icons/icon-checklist.svg"
/>
} } }

i think it has something to do when control statements are on a single line, then indentation doesnt work anymore

} @for (mealType of mealTypeKeys; track mealType) { @if (mealType) {

[fisker]

Can't reproduce

Prettier 3.1.1
Playground link

--parser angular

Input:

@if (mealType !== 'lodging' && !package) {
<span class="mx-0.5 text-base font-normal sm:text-lg"> + </span>
@switch (mealType.toLowerCase()) { @case ('breakfast') {
<svg-icon
	class="h-6 w-6 grow-0 text-dark-primary"
	data-test-id="breakfast-icon"
	src="assets/icons/icon-coffee-cup.svg"
/>
} @case ('halfboard') {
<svg-icon
	class="h-6 w-6 grow-0 text-dark-primary"
	data-test-id="halfboard-icon"
	src="assets/icons/icon-fork-knife.svg"
/>
} @default {
<svg-icon
	class="h-6 w-6 grow-0 text-dark-primary"
	data-test-id="fullboard-allin-icon"
	src="assets/icons/icon-checklist.svg"
/>
} } }

Output:

@if (mealType !== "lodging" && !package) {
  <span class="mx-0.5 text-base font-normal sm:text-lg"> + </span>
  @switch (mealType.toLowerCase()) {
    @case ("breakfast") {
      <svg-icon
        class="h-6 w-6 grow-0 text-dark-primary"
        data-test-id="breakfast-icon"
        src="assets/icons/icon-coffee-cup.svg"
      />
    }
    @case ("halfboard") {
      <svg-icon
        class="h-6 w-6 grow-0 text-dark-primary"
        data-test-id="halfboard-icon"
        src="assets/icons/icon-fork-knife.svg"
      />
    }
    @default {
      <svg-icon
        class="h-6 w-6 grow-0 text-dark-primary"
        data-test-id="fullboard-allin-icon"
        src="assets/icons/icon-checklist.svg"
      />
    }
  }
}

Next time please follow the issue template.

[rickvandermeij-aanzee]

thanks, i have to use parser angular instead of the default html when using the control syntax. will close the issue

[msoler95]

Thanks @fisker. If someone has this issue, in your .prettierrc add this to use the angular parser:

"overrides": [
    {
      "files": "*.html",
      "options": {
        "parser": "angular"
      }
    }
  ]

[jonelleamio]

I use prettier inside eslint, so i tried this :

  {
      "files": ["*.component.html"],
      "extends": ["plugin:@angular-eslint/template/recommended", "plugin:prettier/recommended"],
      "rules": {
        "@angular-eslint/template/prefer-control-flow": "warn",
        "prettier/prettier": ["error", { "overrides": [{ "options": { "parser": "angular" } }] }]
      }
    }

which doesn't work
while this inside .prettierrc works

    "overrides": [
    {
      "files": "*.component.html",
      "options": {
        "parser": "angular"
      }
    }
  ]

Can someone help ?

[emlim23]

I have the same issue. I'm on prettier 3.2.5 and I've added that overrides in the .prettierrc, however the tab format for Angular 17 flow controls still doesn't work. Here's my .prettierrc file:

{ "printWidth": 120, "singleQuote": true, "useTabs": false, "tabWidth": 2, "semi": true, "bracketSpacing": true, "arrowParens": "always", "trailingComma": "none", "bracketSameLine": true, "overrides": [{ "files": "*.html", "options": { "parser": "angular" } }] }

Can somebody help?

[mvermand22]

I'm also on prettier 3.2.5 and no success with .prettierrc in project root:

{
  "overrides": [
    {
      "files": "*.html",
      "options": {
        "parser": "angular"
      }
    }
  ]
}

[emlimlf]

@mvermand22 I was able to figure it out. When I ran:
npx prettier --version
The version I was getting was 2.8~, maybe try checking there. What I did was force update the prettier version to 3.2^

[mvermand22]

@mvermand22 I was able to figure it out. When I ran: npx prettier --version The version I was getting was 2.8~, maybe try checking there. What I did was force update the prettier version to 3.2^

Hi, i'm already on v3.2.5, so that won't fix it for me. Thanks for the reply though.