https://prettier.netlify.app/assets/js/c6cd8ca1.1f678b7a.js

1"use strict";(self.webpackChunk=self.webpackChunk||[]).push([["1133"],{2324(e,n,t){t.r(n),t.d(n,{assets:()=>o,contentTitle:()=>s,default:()=>h,frontMatter:()=>i,metadata:()=>r,toc:()=>c});var r=t(1661),a=t(4848),l=t(8453);let i={authors:"fisker",title:"Prettier 3.8: Support for Angular v21.1"},s,o={authorsImageUrls:[void 0]},c=[{value:"Highlights",id:"highlights",level:2},{value:"Angular",id:"angular",level:3},{value:"Support for consecutive switch cases (#18593 by @fisker)",id:"change-18593",level:4},{value:"Support for spread elements (#18596, #18636 by @fisker)",id:"change-18596",level:4},{value:"Other Changes",id:"other-changes",level:2},{value:"Angular",id:"angular-1",level:3},{value:"Don&#39;t print attribute values that are single template or string literals on new lines (#18378 by @ravindUwU)",id:"change-18378",level:4},{value:"Markdown",id:"markdown",level:3},{value:"Support formatting Angular syntax in code block (#18519 by @fisker)",id:"change-18519",level:4}];function p(e){let n={a:"a",code:"code",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,l.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.p,{children:"We're excited to announce that Prettier now fully supports the fresh features landing in Angular v21.1 (released today \u{1F389})!"}),"\n",(0,a.jsx)(n.p,{children:"This update brings cleaner, more expressive templates with:"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:["Consecutive ",(0,a.jsx)(n.code,{children:"@case"})," statements in ",(0,a.jsx)(n.code,{children:"@switch"})," blocks."]}),"\n",(0,a.jsxs)(n.li,{children:["Spread elements (",(0,a.jsx)(n.code,{children:"..."}),") in array literals, object literals, and function calls inside templates."]}),"\n"]}),"\n",(0,a.jsx)(n.p,{children:"We've also added the ability to format Angular syntax beautifully inside Markdown code blocks."}),"\n",(0,a.jsxs)(n.p,{children:["If you find Prettier valuable and want to help us keep pace with fast-moving frameworks like Angular, please consider ",(0,a.jsx)(n.a,{href:"https://opencollective.com/prettier",children:"sponsoring us on OpenCollective"})," or supporting the projects we rely on. Thank you for being part of this community \u2014 your support means a lot!"]}),"\n",(0,a.jsx)(n.h2,{id:"highlights",children:"Highlights"}),"\n",(0,a.jsx)(n.h3,{id:"angular",children:"Angular"}),"\n",(0,a.jsxs)(n.h4,{id:"change-18593",children:["Support for consecutive switch cases (",(0,a.jsx)(n.a,{href:"https://github.com/prettier/prettier/pull/18593",children:"#18593"})," by ",(0,a.jsx)(n.a,{href:"https://github.com/fisker",children:"@fisker"}),")"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-html",children:'\x3c!-- Input --\x3e\n@switch (userRole) {\n  @case (\'admin\')\n  @case (\'moderator\') {\n    <p>Welcome, boss! Full access.</p>\n  }\n  @case (\'user\') { <p>Standard access</p> }\n  @default { <p>Guest view</p> }\n}\n\n\x3c!-- Prettier 3.7 --\x3e\nSyntaxError: Incomplete block "case". If you meant to write the @ character, you should use the "&#64;" HTML entity instead. (2:3)\n\n\x3c!-- Prettier 3.8 --\x3e\n@switch (userRole) {\n  @case ("admin")\n  @case ("moderator") {\n    <p>Welcome, boss! Full access.</p>\n  }\n  @case ("user") {\n    <p>Standard access</p>\n  }\n  @default {\n    <p>Guest view</p>\n  }\n}\n'})}),"\n",(0,a.jsxs)(n.h4,{id:"change-18596",children:["Support for spread elements (",(0,a.jsx)(n.a,{href:"https://github.com/prettier/prettier/pull/18596",children:"#18596"}),", ",(0,a.jsx)(n.a,{href:"https://github.com/prettier/prettier/pull/18636",children:"#18636"})," by ",(0,a.jsx)(n.a,{href:"https://github.com/fisker",children:"@fisker"}),")"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-html",children:'\x3c!-- Input --\x3e\n<MyComponent\n  [array]="[   ...foo, ...bar]"\n  [object]="{...bar, ...extra  }"\n  [call]="call(  ...baz)"\n/>\n\n\x3c!-- Prettier 3.7 --\x3e\n<MyComponent\n  [array]="[   ...foo, ...bar]"\n  [object]="{...bar, ...extra  }"\n  [call]="call(  ...baz)"\n/>\n\n\x3c!-- Prettier 3.8 --\x3e\n<MyComponent\n  [array]="[...foo, ...bar]"\n  [object]="{ ...bar, ...extra }

1"\n  [call]="call(...baz)"\n/>\n'})}),"\n",(0,a.jsx)(n.h2,{id:"other-changes",children:"Other Changes"}),"\n",(0,a.jsx)(n.h3,{id:"angular-1",children:"Angular"}),"\n",(0,a.jsxs)(n.h4,{id:"change-18378",children:["Don't print attribute values that are single template or string literals on new lines (",(0,a.jsx)(n.a,{href:"https://github.com/prettier/prettier/pull/18378",children:"#18378"})," by ",(0,a.jsx)(n.a,{href:"https://github.com/ravindUwU",children:"@ravindUwU"}),")"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-html",children:'\x3c!-- Input --\x3e\n<component\n  [property]="`\n    template\n    literal\n  `"\n/>\n\n\x3c!-- Prettier 3.7 --\x3e\n<component\n  [property]="\n    `\n    template\n    literal\n  `\n  "\n/>\n\n\x3c!-- Prettier 3.8 --\x3e\n<component\n  [property]="`\n    template\n    literal\n  `"\n/>\n'})}),"\n",(0,a.jsx)(n.h3,{id:"markdown",children:"Markdown"}),"\n",(0,a.jsxs)(n.h4,{id:"change-18519",children:["Support formatting Angular syntax in code block (",(0,a.jsx)(n.a,{href:"https://github.com/prettier/prettier/pull/18519",children:"#18519"})," by ",(0,a.jsx)(n.a,{href:"https://github.com/fisker",children:"@fisker"}),")"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-md",children:"\x3c!-- Input --\x3e\n```angular-ts\n@Component({\n  selector: 'app-root',\n  template: `<div\n>Welcome to {{\n  Angular}}! </div>`,\n})\nexport class App {}\n```\n\n```angular-html\n<div\n>Welcome to {{\n  Angular}}! </div>\n```\n\n\x3c!-- Prettier 3.7 --\x3e\nSame as input\n\n\x3c!-- Prettier 3.8 --\x3e\n```angular-ts\n@Component({\n  selector: \"app-root\",\n  template: `<div>Welcome to {{ Angular }}!</div>`,\n})\nexport class App {}\n```\n\n```angular-html\n<div>Welcome to {{ Angular }}!</div>\n```\n"})})]})}function h(e={}){let{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(p,{...e})}):p(e)}},8453(e,n,t){t.d(n,{R:()=>i,x:()=>s});var r=t(6540);let a={},l=r.createContext(a);function i(e){let n=r.useContext(l);return r.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),r.createElement(l.Provider,{value:n},e.children)}},1661(e){e.exports=JSON.parse('{"permalink":"/blog/2026/01/14/3.8.0","editUrl":"https://github.com/prettier/prettier/edit/main/website/blog/2026-01-14-3.8.0.md","source":"@site/blog/2026-01-14-3.8.0.md","title":"Prettier 3.8: Support for Angular v21.1","description":"We\'re excited to announce that Prettier now fully supports the fresh features landing in Angular v21.1 (released today \u{1F389})!","date":"2026-01-14T00:00:00.000Z","tags":[],"readingTime":1.97,"hasTruncateMarker":true,"authors":[{"name":"Fisker Cheung","url":"https://github.com/fisker","socials":{"github":"https://github.com/fisker"},"imageURL":"https://github.com/fisker.png?size=58","key":"fisker","page":null}],"frontMatter":{"authors":"fisker","title":"Prettier 3.8: Support for Angular v21.1"},"unlisted":false,"prevItem":{"title":"Prettier 3.9: Major parser upgrades and Formatting improvements","permalink":"/blog/2026/06/27/3.9.0"},"nextItem":{"title":"Prettier 3.7: Improved formatting consistency and new plugin features!","permalink":"/blog/2025/11/27/3.7.0"}}')}}]);