Add blog post for v3.8.0 (#18639)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
2026-01-15 07:57:39 +08:00
1 parent b04d05b831
commit 04336012b3
@@ -0,0 +1,154 @@
+---
+authors: "fisker"
+title: "Prettier 3.8: Support for Angular v21.1"
+---
+
+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](https://opencollective.com/prettier) or supporting the projects we rely on. Thank you for being part of this community — your support means a lot!
+
+<!-- truncate -->
+
+## Highlights
+
+### Angular
+
+#### Support for consecutive switch cases ([#18593](https://github.com/prettier/prettier/pull/18593) by [@fisker](https://github.com/fisker)) {#change-18593}
+
+<!-- prettier-ignore -->
+```html
+<!-- 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](https://github.com/prettier/prettier/pull/18596), [#18636](https://github.com/prettier/prettier/pull/18636) by [@prettier](https://github.com/prettier)) {#change-18596}
+
+<!-- prettier-ignore -->
+```html
+<!-- 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](https://github.com/prettier/prettier/pull/18378) by [@ravindUwU](https://github.com/ravindUwU)) {#change-18378}
+
+<!-- prettier-ignore -->
+```html
+<!-- 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](https://github.com/prettier/prettier/pull/18519) by [@fisker](https://github.com/fisker)) {#change-18519}
+
+<!-- prettier-ignore -->
+````md
+<!-- 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>
+```
+````