{"id":27149,"date":"2024-11-15T10:16:04","date_gmt":"2024-11-15T09:16:04","guid":{"rendered":"https:\/\/www.angulararchitects.io\/blog\/draft-of-the-revised-angular-style-guide\/"},"modified":"2025-04-06T08:42:29","modified_gmt":"2025-04-06T06:42:29","slug":"draft-angular-style-guide","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/draft-angular-style-guide\/","title":{"rendered":"Draft of the Revised Angular Style Guide"},"content":{"rendered":"<p>In 2016, alongside <em>Angular 2.0.0<\/em>, a comprehensive 52-page <a href=\"https:\/\/angular.dev\/style-guide\">coding style guide<\/a> was introduced. Over the past eight years and 16 subsequent versions, the <em>Angular framework<\/em> has evolved significantly. Recognizing the need for updated guidance, <a href=\"https:\/\/github.com\/jelbourn\">Jeremy Elbourn<\/a>, <em>Angular\u2019s<\/em> technical lead at Google, has initiated a substantial revision of the official style guide.<\/p>\n<p><a href=\"https:\/\/gist.github.com\/jelbourn\/0158b02cfb426e69c172db4ec92e3c0c\">Draft of the new Angular coding style guide<\/a>.<\/p>\n<h2>Primary goals of the Angular team<\/h2>\n<p>Jeremy outlines the <em>Angular team\u2019s<\/em> goals for the new style guide in this <a href=\"https:\/\/github.com\/angular\/angular\/discussions\/58412\">RFC<\/a> on the <em>Angular GitHub repo<\/em>:<\/p>\n<ul>\n<li><strong>Prioritize<\/strong> style choices over general best practices.<\/li>\n<li><strong>Modernize guidance<\/strong> to reflect new features and APIs.<\/li>\n<li><strong>Update recommendations<\/strong> based on real world observations.<\/li>\n<li><strong>Condense<\/strong> the guide to 4 pages (down from 52), simplifying it significantly.<\/li>\n<li><strong>Remove non-Angular guidance<\/strong> instead linking to <a href=\"https:\/\/google.github.io\/styleguide\/tsguide.html\">Google's TS style guide<\/a>.<\/li>\n<\/ul>\n<h3>Well it's a draft, why should I care?<\/h3>\n<p>Although the new style guide is still a <strong>draft<\/strong> and may take some time to be officially released (v20.0.0 would be fitting after v2.0.0), I believe we should <strong>start applying it today<\/strong>.<\/p>\n<p>Overall, I find the key points in the new style guide both valid and beneficial. This post aims to highlight some of the most noteworthy aspects.<\/p>\n<h2>General thoughts<\/h2>\n<p>In the introduction Jeremy writes:<\/p>\n<h3>When in doubt, prefer consistency<\/h3>\n<p>I completely agree! Even though these rules aren\u2019t part of the official style guide, I always emphasize my three favorite frontend development rules in <em>Angular<\/em> essential and other workshops:<\/p>\n<ul>\n<li><strong>Keep it short &amp; simple<\/strong> (prefer less code, limit files to max. 400 LoC, prefer small functions, ...)<\/li>\n<li><strong>Don't repeat yourself<\/strong> (create helpers, services, pipes, ...)<\/li>\n<li><strong>Be consistent<\/strong> (use Prettier, adhere to style guide(s), ...)<\/li>\n<\/ul>\n<h3>Small is beautiful (added by me)<\/h3>\n<p>Though the <strong>400 LoC limit<\/strong> is being removed from the new &quot;<em>Angular-specific<\/em>&quot; style guide, I believe it remains a valuable best practice. In my experience with numerous Angular projects, many components exceed this limit, often leading to complexities that make maintenance challenging for developers. Keeping components within a manageable size can significantly ease long-term upkeep and thus improve developers lives. There are many ways to reduce the complexity of components, I'll just mention three important ones:<\/p>\n<ul>\n<li>Create <em>Angular<\/em> building blocks like subcomponents, directives, services, pipes<\/li>\n<li>Use state management or component state facades (services)<\/li>\n<li>Delegate helper functions into separate files \/ classes<\/li>\n<\/ul>\n<p>Jeremy also highlights updates to file naming conventions and project structure recommendations in the new style guide. These changes aim to bring clarity and consistency, making it easier for developers to navigate and manage Angular projects effectively.<\/p>\n<h3>Naming of files<\/h3>\n<p>Okay, the file naming conventions are set to change, but I won\u2019t dive into specifics here since they may still be adjusted. I anticipate a migration script will be provided to handle renaming, making the transition seamless.<\/p>\n<h3>Project structure<\/h3>\n<p>One key point in the structure recommendations is to <strong>group features into folders<\/strong>, aligning well with our <em>Angular Architects Team\u2019s<\/em> approach to structuring enterprise <em>Angular<\/em> apps for a clean, maintainable codebase:<\/p>\n<ul>\n<li>We can use an <a href=\"https:\/\/nx.dev\/getting-started\/tutorials\/angular-monorepo-tutorial\">Nrwl Nx monorepo<\/a> with libraries to organize features, or<\/li>\n<li>use the lightweight tool <a href=\"https:\/\/github.com\/softarc-consulting\/sheriff\">Sheriff<\/a> to enforce feature boundaries.<\/li>\n<\/ul>\n<p>In both cases, we suggest (though it\u2019s optional) applying domain-driven design (DDD) to define feature boundaries. You can explore this further in Manfred\u2019s post on <a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/modern-architectures-with-angular-part-1-strategic-design-with-sheriff-and-standalone-components\/\">Strategic Design with Sheriff and Standalone Components<\/a>.<\/p>\n<p>Another valuable guideline is: <strong>One concept per file<\/strong>. Keeping files focused on a single concept \u2014 <em>Angular<\/em> building blocks, types, etc. \u2014 helps maintain clarity and simplicity.<\/p>\n<h2>Highlights of the new style guide<\/h2>\n<p>Here are a few <strong>personal highlights<\/strong> I\u2019d like to point out, along with some minor <strong>adjustments and remarks<\/strong>:<\/p>\n<h3>Keep components focused on presentation<\/h3>\n<p>Avoid complex business logic in components. Delegate this logic to your store or services. Additionally, if template code becomes overly complex, refactor that logic into the TypeScript code to improve readability and maintainability.<\/p>\n<h3>Group Angular-specific properties before methods<\/h3>\n<p>This approach prioritizes organizing inputs, outputs, and queries first, followed by other properties, and then methods. Personally, I also prefer grouping all injected dependencies below, sorted alphabetically, before the first method. As Jeremy notes, \u201cThis practice makes it easier to find the class\u2019s template APIs and dependencies.\u201d<\/p>\n<h3>Keep (constructor and) lifecycle methods simple<\/h3>\n<p>Avoid placing lengthy or complex logic directly in the constructor or lifecycle hooks like <code>ngOnInit<\/code>. Instead, create well-named methods to house that logic and simply call those methods. This approach enhances readability, making it easier to understand a component\u2019s functionality at a glance.<\/p>\n<pre><code class=\"language-typescript\">ngOnInit(): void { \/\/ &lt;-- don&#039;t forget to add the return type on all your methods ;-)\n  this.startLogging();\n  this.runBackgroundTask(); \/\/ &lt;-- not sure if this is the best possible method name ;-)\n}<\/code><\/pre>\n<h3>Use <code>protected<\/code> on component class members used in the template<\/h3>\n<p>Applying access modifiers to limit access to a class\u2019s fields is always a good practice for enhancing code quality. When I see code without them, it immediately feels sloppy.<\/p>\n<p>A month ago, after a poll within the <em>Angular Architects Team<\/em>, we concluded that using <code>protected<\/code> for fields accessed in a component\u2019s template is a good practice. It\u2019s great to see this now reflected in the official style guide! A small addition: if a field isn\u2019t used in the template, the default should, of course, be <code>private<\/code>.<\/p>\n<p>Small note: Personally, I strongly discourage typing the <code>public<\/code> modifier, since it\u2019s the default and doesn\u2019t add any value. Of course for our fields (members and methods) in the <em>Angular<\/em> building blocks <code>public<\/code> (by not adding a modifier \ud83d\ude0f) is rather an exception than a default.<\/p>\n<pre><code class=\"language-typescript\">@Component({\n  \/* ... *\/\n  template: <code>&lt;p&gt;{{ fullName() }}&lt;\/p&gt;<\/code>,\n})\nexport class UserProfile {\n  readonly firstName = input();\n  readonly lastName = input();\n\n  \/\/ <code>fullName<\/code> is not part of the component&#039;s API, but is used in the template\n  protected readonly fullName = computed(() =&gt; <code>${this.firstName()} ${this.lastName()}<\/code>);\n}<\/code><\/pre>\n<h3>Use <code>readonly<\/code> on properties initialized by Angular (and more)<\/h3>\n<p>More than a year ago, I started adding the <code>readonly<\/code> modifier to almost everything\u2014much like preferring <code>const<\/code> over <code>let<\/code>. This includes Angular signals, dependency injection fields, <a href=\"mailto:code&gt;@Output&lt;\/code\">code>@Output<\/code<\/a>, and query APIs. Not for <a href=\"mailto:code&gt;@Input&lt;\/code\">code>@Input<\/code<\/a> properties, though, since <code>readonly<\/code> wouldn\u2019t work there. It\u2019s a bit of extra work, but I think it\u2019s worth the effort for the added clarity and structure.<\/p>\n<pre><code class=\"language-typescript\">@Component({\n  \/* ... *\/\n})\nexport class UserProfile {\n  readonly userId = input();\n  readonly userSaved = output();\n\n  private readonly userService = inject(UserService);\n}<\/code><\/pre>\n<h3>Prefer class and style over ngClass and ngStyle<\/h3>\n<p>I\u2019ve been teaching this approach for years in my workshops. It makes code easier to read and understand, and it aligns nicely with tools like Prettier.<\/p>\n<pre><code class=\"language-html\">&lt;div [class.admin]=&quot;isAdmin&quot; [class.dense]=&quot;density === &#039;high&#039;&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\n<h3>Name event handlers for what they do, not for the triggering event<\/h3>\n<p>I\u2019ve recently started adopting this approach, as it helps clarify what an event does just by reading the template. Overall, using clear and meaningful names for symbols and methods is crucial for readability and maintainability.<\/p>\n<pre><code class=\"language-html\">&lt;button (click)=&quot;saveUserData()&quot;&gt;Save&lt;\/button&gt;<\/code><\/pre>\n<h2>That's all folks<\/h2>\n<p>I hope you found my selection useful! If you think I missed an important rule or feel that Jeremy trimmed too much from the original Angular style guide, let me know by <a href=\"mailto:alexander.thalhammer@angulararchitects.io\">email<\/a> or by joining one of the <strong>upcoming workshops<\/strong>. The new style guide will be integrated into all my examples \u2014 demos and exercises \u2014 and will be a focus in the best practices workshop:<\/p>\n<h2>Workshops<\/h2>\n<p>If you want to deep dive into <em>Angular<\/em>, we offer a variety of workshops - both in English and German.<\/p>\n<ul>\n<li><a href=\"https:\/\/www.angulararchitects.io\/en\/training\/angular-best-practices\/\"><strong>Best Practices Workshop<\/strong><\/a> \ud83d\udcc8<\/li>\n<li><a href=\"https:\/\/www.angulararchitects.io\/en\/training\/angular-accessibility-workshop\/\"><strong>Accessibility Worksho<\/strong><\/a> \u267f<\/li>\n<li><a href=\"https:\/\/www.angulararchitects.io\/en\/training\/angular-performance-optimization-workshop\/\"><strong>Performance Workshop<\/strong><\/a> \ud83d\ude80<\/li>\n<\/ul>\n<p>Also, if you wanna deep dive into quality, make sure to check out the:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.angulararchitects.io\/en\/training\/angular-quality-workshop\/\"><strong>Angular Quality Workshop<\/strong><\/a> by my colleague <a href=\"https:\/\/github.com\/rainerhahnekamp\">Rainer Hahnekamp<\/a>.<\/li>\n<\/ul>\n<p>This blog post was written by <a href=\"https:\/\/alex.thalhammer.name\">Alexander Thalhammer<\/a>. Follow me on <a href=\"https:\/\/at.linkedin.com\/in\/thalhammer\">Linkedin<\/a>, <a href=\"https:\/\/twitter.com\/LX_T\">X<\/a> or <a href=\"https:\/\/github.com\/L-X-T\">giThub<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In 2016, alongside Angular 2.0.0, a comprehensive 52-page coding style guide was introduced. Over the past eight years and 16 subsequent versions, the Angular framework has evolved significantly. Recognizing the need for updated guidance, Jeremy Elbourn, Angular\u2019s technical lead at Google, has initiated a substantial revision of the official style guide. Draft of the new [&hellip;]<\/p>\n","protected":false},"author":21,"featured_media":27139,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"footnotes":""},"categories":[18],"tags":[],"class_list":["post-27149","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Draft of the Revised Angular Style Guide - ANGULARarchitects<\/title>\n<meta name=\"description\" content=\"Jeremy Elbourn, Angular\u2019s technical lead at Google, has initiated a substantial revision of the official style guide.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.angulararchitects.io\/en\/blog\/draft-angular-style-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Draft of the Revised Angular Style Guide - ANGULARarchitects\" \/>\n<meta property=\"og:description\" content=\"Jeremy Elbourn, Angular\u2019s technical lead at Google, has initiated a substantial revision of the official style guide.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.angulararchitects.io\/en\/blog\/draft-angular-style-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"ANGULARarchitects\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-15T09:16:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-06T06:42:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/11\/shutterstock_2502969291.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"667\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Alexander Thalhammer\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@LX_T\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alexander Thalhammer\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/draft-angular-style-guide\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/draft-angular-style-guide\/\"},\"author\":{\"name\":\"Alexander Thalhammer\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/eefb0cd4d115dfd406a02b6dbc760d45\"},\"headline\":\"Draft of the Revised Angular Style Guide\",\"datePublished\":\"2024-11-15T09:16:04+00:00\",\"dateModified\":\"2025-04-06T06:42:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/draft-angular-style-guide\/\"},\"wordCount\":918,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/draft-angular-style-guide\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/11\/shutterstock_2502969291.jpg\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/draft-angular-style-guide\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/draft-angular-style-guide\/\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/blog\/draft-angular-style-guide\/\",\"name\":\"Draft of the Revised Angular Style Guide - ANGULARarchitects\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/draft-angular-style-guide\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/draft-angular-style-guide\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/11\/shutterstock_2502969291.jpg\",\"datePublished\":\"2024-11-15T09:16:04+00:00\",\"dateModified\":\"2025-04-06T06:42:29+00:00\",\"description\":\"Jeremy Elbourn, Angular\u2019s technical lead at Google, has initiated a substantial revision of the official style guide.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/draft-angular-style-guide\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/draft-angular-style-guide\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/draft-angular-style-guide\/#primaryimage\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/11\/shutterstock_2502969291.jpg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/11\/shutterstock_2502969291.jpg\",\"width\":1000,\"height\":667},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/draft-angular-style-guide\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.angulararchitects.io\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Draft of the Revised Angular Style Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"name\":\"ANGULARarchitects\",\"description\":\"AngularArchitects.io\",\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\",\"name\":\"ANGULARarchitects\",\"alternateName\":\"SOFTWAREarchitects\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"width\":644,\"height\":216,\"caption\":\"ANGULARarchitects\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/github.com\/angular-architects\",\"https:\/\/www.linkedin.com\/company\/angular-architects\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/eefb0cd4d115dfd406a02b6dbc760d45\",\"name\":\"Alexander Thalhammer\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/23f1b6f9b1ee7d04247b8320851762347d56c76b1537d100d07390d6d919b78d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/23f1b6f9b1ee7d04247b8320851762347d56c76b1537d100d07390d6d919b78d?s=96&d=mm&r=g\",\"caption\":\"Alexander Thalhammer\"},\"sameAs\":[\"https:\/\/x.com\/LX_T\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Draft of the Revised Angular Style Guide - ANGULARarchitects","description":"Jeremy Elbourn, Angular\u2019s technical lead at Google, has initiated a substantial revision of the official style guide.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.angulararchitects.io\/en\/blog\/draft-angular-style-guide\/","og_locale":"en_US","og_type":"article","og_title":"Draft of the Revised Angular Style Guide - ANGULARarchitects","og_description":"Jeremy Elbourn, Angular\u2019s technical lead at Google, has initiated a substantial revision of the official style guide.","og_url":"https:\/\/www.angulararchitects.io\/en\/blog\/draft-angular-style-guide\/","og_site_name":"ANGULARarchitects","article_published_time":"2024-11-15T09:16:04+00:00","article_modified_time":"2025-04-06T06:42:29+00:00","og_image":[{"width":1000,"height":667,"url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/11\/shutterstock_2502969291.jpg","type":"image\/jpeg"}],"author":"Alexander Thalhammer","twitter_card":"summary_large_image","twitter_creator":"@LX_T","twitter_misc":{"Written by":"Alexander Thalhammer","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/draft-angular-style-guide\/#article","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/draft-angular-style-guide\/"},"author":{"name":"Alexander Thalhammer","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/eefb0cd4d115dfd406a02b6dbc760d45"},"headline":"Draft of the Revised Angular Style Guide","datePublished":"2024-11-15T09:16:04+00:00","dateModified":"2025-04-06T06:42:29+00:00","mainEntityOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/draft-angular-style-guide\/"},"wordCount":918,"commentCount":0,"publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/draft-angular-style-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/11\/shutterstock_2502969291.jpg","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.angulararchitects.io\/en\/blog\/draft-angular-style-guide\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/draft-angular-style-guide\/","url":"https:\/\/www.angulararchitects.io\/en\/blog\/draft-angular-style-guide\/","name":"Draft of the Revised Angular Style Guide - ANGULARarchitects","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/draft-angular-style-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/draft-angular-style-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/11\/shutterstock_2502969291.jpg","datePublished":"2024-11-15T09:16:04+00:00","dateModified":"2025-04-06T06:42:29+00:00","description":"Jeremy Elbourn, Angular\u2019s technical lead at Google, has initiated a substantial revision of the official style guide.","breadcrumb":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/draft-angular-style-guide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.angulararchitects.io\/en\/blog\/draft-angular-style-guide\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/draft-angular-style-guide\/#primaryimage","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/11\/shutterstock_2502969291.jpg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/11\/shutterstock_2502969291.jpg","width":1000,"height":667},{"@type":"BreadcrumbList","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/draft-angular-style-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.angulararchitects.io\/en\/"},{"@type":"ListItem","position":2,"name":"Draft of the Revised Angular Style Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.angulararchitects.io\/en\/#website","url":"https:\/\/www.angulararchitects.io\/en\/","name":"ANGULARarchitects","description":"AngularArchitects.io","publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.angulararchitects.io\/en\/#organization","name":"ANGULARarchitects","alternateName":"SOFTWAREarchitects","url":"https:\/\/www.angulararchitects.io\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","width":644,"height":216,"caption":"ANGULARarchitects"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/github.com\/angular-architects","https:\/\/www.linkedin.com\/company\/angular-architects\/"]},{"@type":"Person","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/eefb0cd4d115dfd406a02b6dbc760d45","name":"Alexander Thalhammer","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/23f1b6f9b1ee7d04247b8320851762347d56c76b1537d100d07390d6d919b78d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/23f1b6f9b1ee7d04247b8320851762347d56c76b1537d100d07390d6d919b78d?s=96&d=mm&r=g","caption":"Alexander Thalhammer"},"sameAs":["https:\/\/x.com\/LX_T"]}]}},"_links":{"self":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/27149","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/comments?post=27149"}],"version-history":[{"count":5,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/27149\/revisions"}],"predecessor-version":[{"id":29628,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/27149\/revisions\/29628"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media\/27139"}],"wp:attachment":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media?parent=27149"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/categories?post=27149"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/tags?post=27149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}