Skip to main content

Prettier 3.8: Support for Angular v21.1

· 2 min read
Fisker Cheung
Fisker Cheung

We're excited to announce that Prettier now fully supports the fresh features landing in Angular v21.1 (released today 🎉)!

This update brings cleaner, more expressive templates with:

  • Consecutive @case statements in @switch blocks.
  • Spread elements (...) in array literals, object literals, and function calls inside templates.

We've also added the ability to format Angular syntax beautifully inside Markdown code blocks.

If you find Prettier valuable and want to help us keep pace with fast-moving frameworks like Angular, please consider sponsoring us on OpenCollective or supporting the projects we rely on. Thank you for being part of this community — your support means a lot!

Highlights​

Angular​

Support for consecutive switch cases (#18593 by @fisker)​

<!-- Input -->
@switch (userRole) {
  @case ('admin')
  @case ('moderator') {
    <p>Welcome, boss! Full access.</p>
  }
  @case ('user') { <p>Standard access</p> }
  @default { <p>Guest view</p> }
}

<!-- Prettier 3.7 -->
SyntaxError: Incomplete block "case". If you meant to write the @ character, you should use the "&#64;" HTML entity instead. (2:3)

<!-- Prettier 3.8 -->
@switch (userRole) {
  @case ("admin")
  @case ("moderator") {
    <p>Welcome, boss! Full access.</p>
  }
  @case ("user") {
    <p>Standard access</p>
  }
  @default {
    <p>Guest view</p>
  }
}

Support for spread elements (#18596, #18636 by @fisker)​

<!-- Input -->
<MyComponent
  [array]="[   ...foo, ...bar]"
  [object]="{...bar, ...extra  }"
  [call]="call(  ...baz)"
/>

<!-- Prettier 3.7 -->
<MyComponent
  [array]="[   ...foo, ...bar]"
  [object]="{...bar, ...extra  }"
  [call]="call(  ...baz)"
/>

<!-- Prettier 3.8 -->
<MyComponent
  [array]="[...foo, ...bar]"
  [object]="{ ...bar, ...extra }"
  [call]="call(...baz)"
/>

Other Changes​

Angular​

Don't print attribute values that are single template or string literals on new lines (#18378 by @ravindUwU)​

<!-- Input -->
<component
  [property]="`
    template
    literal
  `"
/>

<!-- Prettier 3.7 -->
<component
  [property]="
    `
    template
    literal
  `
  "
/>

<!-- Prettier 3.8 -->
<component
  [property]="`
    template
    literal
  `"
/>

Markdown​

Support formatting Angular syntax in code block (#18519 by @fisker)​

<!-- Input -->
```angular-ts
@Component({
  selector: 'app-root',
  template: `<div
>Welcome to {{
  Angular}}! </div>`,
})
export class App {}
```

```angular-html
<div
>Welcome to {{
  Angular}}! </div>
```

<!-- Prettier 3.7 -->
Same as input

<!-- Prettier 3.8 -->
```angular-ts
@Component({
  selector: "app-root",
  template: `<div>Welcome to {{ Angular }}!</div>`,
})
export class App {}
```

```angular-html
<div>Welcome to {{ Angular }}!</div>
```