· 2 min read
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
@casestatements in@switchblocks. - 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 "@" 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>
```