Skip to content

Commit 0433601

Browse files
fiskerautofix-ci[bot]
fisker
and
autofix-ci[bot]
authored
Add blog post for v3.8.0 (#18639)
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent b04d05b commit 0433601

4 files changed

Lines changed: 201 additions & 18 deletions

File tree

‎changelog_unreleased/angular/18593.md‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,31 @@
1-
#### Add support for multiple switch cases (#18593 by @fisker)
2-
3-
This feature added in Angular v21.1.
1+
#### [HIGHLIGHT] Support for consecutive switch cases (#18593 by @fisker)
42

53
<!-- prettier-ignore -->
64
```html
75
<!-- Input -->
8-
@switch (foo) {
9-
@case (0)
10-
@case (1) {
11-
<div>case 0 or 1</div>
6+
@switch (userRole) {
7+
@case ('admin')
8+
@case ('moderator') {
9+
<p>Welcome, boss! Full access.</p>
1210
}
11+
@case ('user') { <p>Standard access</p> }
12+
@default { <p>Guest view</p> }
1313
}
1414

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

1818
<!-- Prettier main -->
19-
@switch (a) {
20-
@case (0)
21-
@case (1) {
22-
<div>case 0 or 1</div>
19+
@switch (userRole) {
20+
@case ("admin")
21+
@case ("moderator") {
22+
<p>Welcome, boss! Full access.</p>
23+
}
24+
@case ("user") {
25+
<p>Standard access</p>
26+
}
27+
@default {
28+
<p>Guest view</p>
2329
}
2430
}
2531
```

‎changelog_unreleased/angular/18596.md‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,25 @@
1-
#### Support spread element in array and object literals (#18596, #18636 by @prettier)
1+
#### [HIGHLIGHT] Support for spread elements (#18596, #18636 by @prettier)
22

33
<!-- prettier-ignore -->
44
```html
55
<!-- Input -->
6-
<component
7-
[a]="[ ...a]"
8-
[b]="{...bar }"
9-
[c]="call( ...baz)"
6+
<MyComponent
7+
[array]="[ ...foo, ...bar]"
8+
[object]="{...bar, ...extra }"
9+
[call]="call( ...baz)"
1010
/>
1111

1212
<!-- Prettier stable -->
13-
<component [a]="[ ...a]" [b]="{...bar }" [c]="call( ...baz)" />
13+
<MyComponent
14+
[array]="[ ...foo, ...bar]"
15+
[object]="{...bar, ...extra }"
16+
[call]="call( ...baz)"
17+
/>
1418

1519
<!-- Prettier main -->
16-
<component [a]="[...a]" [b]="{ ...bar }" [c]="call(...baz)" />
20+
<MyComponent
21+
[array]="[...foo, ...bar]"
22+
[object]="{ ...bar, ...extra }"
23+
[call]="call(...baz)"
24+
/>
1725
```

‎changelog_unreleased/blog-post-intro.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
authors: "fisker"
3+
title: "Prettier 3.8: Support for Angular v21.1"
4+
---
5+
6+
We're excited to announce that Prettier now fully supports the fresh features landing in Angular v21.1 (released today 🎉)!
7+
8+
This update brings cleaner, more expressive templates with:
9+
10+
- Consecutive `@case` statements in `@switch` blocks.
11+
- Spread elements (`...`) in array literals, object literals, and function calls inside templates.
12+
13+
We've also added the ability to format Angular syntax beautifully inside Markdown code blocks.
14+
15+
If you find Prettier valuable and want to help us keep pace with fast-moving frameworks like Angular, please consider [sponsoring us on OpenCollective](https://opencollective.com/prettier) or supporting the projects we rely on. Thank you for being part of this community — your support means a lot!

‎website/blog/2026-01-14-3.8.0.md‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
---
2+
authors: "fisker"
3+
title: "Prettier 3.8: Support for Angular v21.1"
4+
---
5+
6+
We're excited to announce that Prettier now fully supports the fresh features landing in Angular v21.1 (released today 🎉)!
7+
8+
This update brings cleaner, more expressive templates with:
9+
10+
- Consecutive `@case` statements in `@switch` blocks.
11+
- Spread elements (`...`) in array literals, object literals, and function calls inside templates.
12+
13+
We've also added the ability to format Angular syntax beautifully inside Markdown code blocks.
14+
15+
If you find Prettier valuable and want to help us keep pace with fast-moving frameworks like Angular, please consider [sponsoring us on OpenCollective](https://opencollective.com/prettier) or supporting the projects we rely on. Thank you for being part of this community — your support means a lot!
16+
17+
<!-- truncate -->
18+
19+
## Highlights
20+
21+
### Angular
22+
23+
#### Support for consecutive switch cases ([#18593](https://github.com/prettier/prettier/pull/18593) by [@fisker](https://github.com/fisker)) {#change-18593}
24+
25+
<!-- prettier-ignore -->
26+
```html
27+
<!-- Input -->
28+
@switch (userRole) {
29+
@case ('admin')
30+
@case ('moderator') {
31+
<p>Welcome, boss! Full access.</p>
32+
}
33+
@case ('user') { <p>Standard access</p> }
34+
@default { <p>Guest view</p> }
35+
}
36+
37+
<!-- Prettier 3.7 -->
38+
SyntaxError: Incomplete block "case". If you meant to write the @ character, you should use the "&#64;" HTML entity instead. (2:3)
39+
40+
<!-- Prettier 3.8 -->
41+
@switch (userRole) {
42+
@case ("admin")
43+
@case ("moderator") {
44+
<p>Welcome, boss! Full access.</p>
45+
}
46+
@case ("user") {
47+
<p>Standard access</p>
48+
}
49+
@default {
50+
<p>Guest view</p>
51+
}
52+
}
53+
```
54+
55+
#### Support for spread elements ([#18596](https://github.com/prettier/prettier/pull/18596), [#18636](https://github.com/prettier/prettier/pull/18636) by [@prettier](https://github.com/prettier)) {#change-18596}
56+
57+
<!-- prettier-ignore -->
58+
```html
59+
<!-- Input -->
60+
<MyComponent
61+
[array]="[ ...foo, ...bar]"
62+
[object]="{...bar, ...extra }"
63+
[call]="call( ...baz)"
64+
/>
65+
66+
<!-- Prettier 3.7 -->
67+
<MyComponent
68+
[array]="[ ...foo, ...bar]"
69+
[object]="{...bar, ...extra }"
70+
[call]="call( ...baz)"
71+
/>
72+
73+
<!-- Prettier 3.8 -->
74+
<MyComponent
75+
[array]="[...foo, ...bar]"
76+
[object]="{ ...bar, ...extra }"
77+
[call]="call(...baz)"
78+
/>
79+
```
80+
81+
## Other Changes
82+
83+
### Angular
84+
85+
#### Don't print attribute values that are single template or string literals on new lines ([#18378](https://github.com/prettier/prettier/pull/18378) by [@ravindUwU](https://github.com/ravindUwU)) {#change-18378}
86+
87+
<!-- prettier-ignore -->
88+
```html
89+
<!-- Input -->
90+
<component
91+
[property]="`
92+
template
93+
literal
94+
`"
95+
/>
96+
97+
<!-- Prettier 3.7 -->
98+
<component
99+
[property]="
100+
`
101+
template
102+
literal
103+
`
104+
"
105+
/>
106+
107+
<!-- Prettier 3.8 -->
108+
<component
109+
[property]="`
110+
template
111+
literal
112+
`"
113+
/>
114+
```
115+
116+
### Markdown
117+
118+
#### Support formatting Angular syntax in code block ([#18519](https://github.com/prettier/prettier/pull/18519) by [@fisker](https://github.com/fisker)) {#change-18519}
119+
120+
<!-- prettier-ignore -->
121+
````md
122+
<!-- Input -->
123+
```angular-ts
124+
@Component({
125+
selector: 'app-root',
126+
template: `<div
127+
>Welcome to {{
128+
Angular}}! </div>`,
129+
})
130+
export class App {}
131+
```
132+
133+
```angular-html
134+
<div
135+
>Welcome to {{
136+
Angular}}! </div>
137+
```
138+
139+
<!-- Prettier 3.7 -->
140+
Same as input
141+
142+
<!-- Prettier 3.8 -->
143+
```angular-ts
144+
@Component({
145+
selector: "app-root",
146+
template: `<div>Welcome to {{ Angular }}!</div>`,
147+
})
148+
export class App {}
149+
```
150+
151+
```angular-html
152+
<div>Welcome to {{ Angular }}!</div>
153+
```
154+
````

0 commit comments

Comments
 (0)