diff --git a/changelog_unreleased/angular/18593.md b/changelog_unreleased/angular/18593.md index 7d1ae4039..8b6f6f806 100644 --- a/changelog_unreleased/angular/18593.md +++ b/changelog_unreleased/angular/18593.md @@ -1,25 +1,31 @@ -#### Add support for multiple switch cases (#18593 by @fisker) - -This feature added in Angular v21.1. +#### [HIGHLIGHT] Support for consecutive switch cases (#18593 by @fisker) ```html -@switch (foo) { - @case (0) - @case (1) { -
case 0 or 1
+@switch (userRole) { + @case ('admin') + @case ('moderator') { +

Welcome, boss! Full access.

} + @case ('user') {

Standard access

} + @default {

Guest view

} } SyntaxError: Incomplete block "case". If you meant to write the @ character, you should use the "@" HTML entity instead. (2:3) -@switch (a) { - @case (0) - @case (1) { -
case 0 or 1
+@switch (userRole) { + @case ("admin") + @case ("moderator") { +

Welcome, boss! Full access.

+ } + @case ("user") { +

Standard access

+ } + @default { +

Guest view

} } ``` diff --git a/changelog_unreleased/angular/18596.md b/changelog_unreleased/angular/18596.md index ced8302c3..249eda0b2 100644 --- a/changelog_unreleased/angular/18596.md +++ b/changelog_unreleased/angular/18596.md @@ -1,17 +1,25 @@ -#### Support spread element in array and object literals (#18596, #18636 by @prettier) +#### [HIGHLIGHT] Support for spread elements (#18596, #18636 by @prettier) ```html - - + - + ``` diff --git a/changelog_unreleased/blog-post-intro.md b/changelog_unreleased/blog-post-intro.md new file mode 100644 index 000000000..10b26d689 --- /dev/null +++ b/changelog_unreleased/blog-post-intro.md @@ -0,0 +1,15 @@ +--- +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! diff --git a/website/blog/2026-01-14-3.8.0.md b/website/blog/2026-01-14-3.8.0.md new file mode 100644 index 000000000..826caf632 --- /dev/null +++ b/website/blog/2026-01-14-3.8.0.md @@ -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! + + + +## Highlights + +### Angular + +#### Support for consecutive switch cases ([#18593](https://github.com/prettier/prettier/pull/18593) by [@fisker](https://github.com/fisker)) {#change-18593} + + +```html + +@switch (userRole) { + @case ('admin') + @case ('moderator') { +

Welcome, boss! Full access.

+ } + @case ('user') {

Standard access

} + @default {

Guest view

} +} + + +SyntaxError: Incomplete block "case". If you meant to write the @ character, you should use the "@" HTML entity instead. (2:3) + + +@switch (userRole) { + @case ("admin") + @case ("moderator") { +

Welcome, boss! Full access.

+ } + @case ("user") { +

Standard access

+ } + @default { +

Guest view

+ } +} +``` + +#### 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} + + +```html + + + + + + + + +``` + +## 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} + + +```html + + + + + + + + +``` + +### Markdown + +#### Support formatting Angular syntax in code block ([#18519](https://github.com/prettier/prettier/pull/18519) by [@fisker](https://github.com/fisker)) {#change-18519} + + +````md + +```angular-ts +@Component({ + selector: 'app-root', + template: `
Welcome to {{ + Angular}}!
`, +}) +export class App {} +``` + +```angular-html +
Welcome to {{ + Angular}}!
+``` + + +Same as input + + +```angular-ts +@Component({ + selector: "app-root", + template: `
Welcome to {{ Angular }}!
`, +}) +export class App {} +``` + +```angular-html +
Welcome to {{ Angular }}!
+``` +````