{"id":53407,"date":"2024-05-17T11:49:06","date_gmt":"2024-05-17T09:49:06","guid":{"rendered":"https:\/\/www.inovex.de\/?p=53407"},"modified":"2024-05-17T12:16:04","modified_gmt":"2024-05-17T10:16:04","slug":"angular-17-recap-and-whats-next","status":"publish","type":"post","link":"https:\/\/www.inovex.de\/de\/blog\/angular-17-recap-and-whats-next\/","title":{"rendered":"Angular 17 Recap and What\u2019s Next?"},"content":{"rendered":"<p>With Angular v18, the next major release is just around the corner. In this article, we take another look at some of the latest features and developments in Angular 17 and venture an outlook on upcoming features in version 18.<!--more--><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_83 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\"><\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.inovex.de\/de\/blog\/angular-17-recap-and-whats-next\/#Built-in-control-flow\" >Built-in control flow<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.inovex.de\/de\/blog\/angular-17-recap-and-whats-next\/#Conditional-statements\" >Conditional statements<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.inovex.de\/de\/blog\/angular-17-recap-and-whats-next\/#Built-in-for-loop\" >Built-in for loop<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.inovex.de\/de\/blog\/angular-17-recap-and-whats-next\/#Deferrable-views\" >Deferrable views<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.inovex.de\/de\/blog\/angular-17-recap-and-whats-next\/#Outlook-Angular-18\" >Outlook Angular 18<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.inovex.de\/de\/blog\/angular-17-recap-and-whats-next\/#Route-Redirects-with-Functions\" >Route Redirects with Functions<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.inovex.de\/de\/blog\/angular-17-recap-and-whats-next\/#New-RedirectCommand\" >New RedirectCommand<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.inovex.de\/de\/blog\/angular-17-recap-and-whats-next\/#Zoneless-applications\" >Zoneless applications<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 id=\"088e\" class=\"nz oa fr be ob oc od oe of og oh oi oj ok ol om on oo op oq or os ot ou ov ow bj\"><span class=\"ez-toc-section\" id=\"Built-in-control-flow\"><\/span>Built-in control flow<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p id=\"336f\" class=\"pw-post-body-paragraph me mf fr mg b mh ox mj mk ml oy mn mo mp oz mr ms mt pa mv mw mx pb mz na nb fk bj\" data-selectable-paragraph=\"\">A new block template syntax has been implemented that provides powerful functionality with simple syntax. Under the hood, the Angular compiler converts the syntax into efficient JavaScript statements that can perform control flow, lazy loading, and more.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Conditional-statements\"><\/span><strong>Conditional statements<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre class=\"lang:default decode:true \">\/\/ Before\r\n&lt;div [ngSwitch]=\"role\"&gt;\r\n  &lt;admin *ngSwitchCase=\"admin\"\/&gt;\r\n  &lt;moderator *ngSwitchCase=\"moderator\"\/&gt;\r\n  &lt;user *ngSwitchDefault\/&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<pre class=\"lang:js decode:true\">\/\/ Now\r\n@switch (role) {\r\n  @case ('admin') { &lt;admin \/&gt; }\r\n  @case ('moderator') { &lt;moderator \/&gt; }\r\n  @default { &lt;user \/&gt; }\r\n}\r\n\r\n\/\/ if-statement example\r\n@if (loggedIn) {\r\n  The user is logged in\r\n} @else {\r\n  The user is not logged in\r\n}\r\n<\/pre>\n<h3><b>Built-in for loop<br \/>\n<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Another notable feature is the introduction of a built-in for-loop, which improves rendering speed and also provides a JavaScript-like syntax:<\/span><\/p>\n<pre class=\"lang:default decode:true\">@for (comment of comments; track comment.id) {\r\n  {{ comment.text }}\r\n} @empty {\r\n  No comments\r\n}\r\n<\/pre>\n<p><b>The built-in control flow is still under developer preview and will change in Angular v18!<\/b><\/p>\n<p>Possible variables that can be used within an @for-loop are the following:<\/p>\n\n<table id=\"tablepress-95\" class=\"tablepress tablepress-id-95\">\n<thead>\n<tr class=\"row-1\">\n\t<th class=\"column-1\">Variable<\/th><th class=\"column-2\">Description<\/th>\n<\/tr>\n<\/thead>\n<tbody class=\"row-striping row-hover\">\n<tr class=\"row-2\">\n\t<td class=\"column-1\">$index<\/td><td class=\"column-2\">the current index<\/td>\n<\/tr>\n<tr class=\"row-3\">\n\t<td class=\"column-1\">$first<\/td><td class=\"column-2\">a boolean value indicating if the current element is the first one<\/td>\n<\/tr>\n<tr class=\"row-4\">\n\t<td class=\"column-1\">$last<\/td><td class=\"column-2\">a boolean value indicating if the current element is the last one<\/td>\n<\/tr>\n<tr class=\"row-5\">\n\t<td class=\"column-1\">$even<\/td><td class=\"column-2\">a boolean value indicating if the current index is an even number<\/td>\n<\/tr>\n<tr class=\"row-6\">\n\t<td class=\"column-1\">$odd<\/td><td class=\"column-2\">a boolean value indicating if the current index is an odd number<\/td>\n<\/tr>\n<tr class=\"row-7\">\n\t<td class=\"column-1\">$count<\/td><td class=\"column-2\">total number of elements<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n<h2><span style=\"font-weight: 400;\"><b>Deferrable views<\/b><br \/>\n<\/span><\/h2>\n<p>The new and improved syntax in various places speeds up the loading of apps. Deferrable views are a further step towards improving performance, as parts of an application can be lazy-loaded.<\/p>\n<pre class=\"lang:default decode:true\">\/\/ In your component, you could have a list of comments that you only load when the user actually wants to see them.\r\n\/\/ With deferrable views, you can achieve this easily and declaratively in one line:\r\n\r\n@defer {\r\n  &lt;comment-list \/&gt;\r\n}\r\n\r\n\/\/ It's even possible to specify what should be displayed while the comments are loading by adding a placeholder:\r\n@placeholder {\r\n  Loading comments...\r\n}\r\n\r\n\/\/ It's even possible to specify what should happen if an error occurs when loading the comments:\r\n@error {\r\n  Failed to load comments.\r\n}\r\n<\/pre>\n<p>Various triggers offer developers flexible options for controlling the loading of content:<\/p>\n\n<table id=\"tablepress-96\" class=\"tablepress tablepress-id-96\">\n<thead>\n<tr class=\"row-1\">\n\t<th class=\"column-1\">Trigger<\/th><th class=\"column-2\">Description<\/th>\n<\/tr>\n<\/thead>\n<tbody class=\"row-striping row-hover\">\n<tr class=\"row-2\">\n\t<td class=\"column-1\">on idle<\/td><td class=\"column-2\">lazily load the block when the browser is not doing any heavy lifting<\/td>\n<\/tr>\n<tr class=\"row-3\">\n\t<td class=\"column-1\">on immediate<\/td><td class=\"column-2\">start lazily loading automatically, without blocking the browser<\/td>\n<\/tr>\n<tr class=\"row-4\">\n\t<td class=\"column-1\">on timer(time)<\/td><td class=\"column-2\">delay loading with a timer<\/td>\n<\/tr>\n<tr class=\"row-5\">\n\t<td class=\"column-1\">on viewport(ref)<\/td><td class=\"column-2\">viewport also allows to specify a reference for an anchor element. When the anchor element is visible, Angular will lazily load the component and render it<\/td>\n<\/tr>\n<tr class=\"row-6\">\n\t<td class=\"column-1\">on interaction(ref)<\/td><td class=\"column-2\">enables you to initiate lazy loading when the user interacts with a particular element<\/td>\n<\/tr>\n<tr class=\"row-7\">\n\t<td class=\"column-1\">on hover(ref)<\/td><td class=\"column-2\">triggers lazy loading when the user hovers an element<\/td>\n<\/tr>\n<tr class=\"row-8\">\n\t<td class=\"column-1\">when expr<\/td><td class=\"column-2\">enables you to specify your own condition via a boolean expression<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n<p><span style=\"font-weight: 400;\">In addition to these triggers, deferrable views also offer the option of prefetching dependencies. Prefetching supports all the triggers mentioned above:<\/span><\/p>\n<pre class=\"lang:default decode:true\">@defer (on viewport; prefetch on idle) {\r\n  &lt;comment-list \/&gt;\r\n}\r\n<\/pre>\n<p><strong class=\"mg fs\">Deferrable views are still in developer preview in v17!<\/strong><\/p>\n<p>These are some of the features and new developments from Angular 17 that influence and change the workflow. Let&#8217;s now take a look at the changes that we can expect in Angular 18.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Outlook-Angular-18\"><\/span>Outlook Angular 18<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Route-Redirects-with-Functions\"><\/span>Route Redirects with Functions<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>A new function in Angular 18 is the management of redirects. Functions can now be used to specify the redirect URL within the redirectTo property of the route object. This offers more flexibility in redirection and opens up new possibilities.<\/p>\n<pre class=\"lang:default decode:true\">\/\/ Before \r\nexport const routes: Routes = [{\r\n  path: '',\r\n  redirectTo: '\/profile',\r\n  pathMatch: 'full'\r\n}];\r\n<\/pre>\n<pre class=\"lang:js decode:true\">\/\/ Now with redirectTo function\r\nexport const routes: Routes = [{\r\n  path: '',\r\n  redirectTo: () =&gt; {\r\n    const userService = inject(UserService);\r\n    return userService.preferredLandingPage; \/\/ e.g. \/profile or \/dashboard\r\n  },\r\n}]<\/pre>\n<h3><span class=\"ez-toc-section\" id=\"New-RedirectCommand\"><\/span>New RedirectCommand<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Another new feature is the introduction of the RedirectCommand class, which is used to manage NavigationExtras. This extension enables improved redirection capabilities within Guards and Resolvers and also improves maintainability and flexibility.<\/p>\n<pre class=\"lang:default decode:true \">const route: Route = {\r\n  path: '\/articles',\r\n  component: ArticleListComponent,\r\n  canActivate: [() =&gt; {\r\n    const router: Router = inject(Router);\r\n    const urlTree: UrlTree = router.parseUrl('.\/comments');\r\n    return new RedirectCommand(urlTree, {\r\n      skipLocationChange: true\r\n    });\r\n  }],\r\n};\r\n<\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Zoneless-applications\"><\/span>Zoneless applications<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>One of the main goals of Angular 18 is to enable applications <strong>without<\/strong> zone.js. This was originally only possible through Signal Components, but with Angular 18 this will also be possible without Signal Components.<\/p>\n<p>This was a recap of the latest features from v17 and a preview of the release of Angular v18 which is planned for the end of May 2024. We are very excited about further features and will report on them again.<\/p>\n<p>Stay tuned!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>With Angular v18, the next major release is just around the corner. In this article, we take another look at some of the latest features and developments in Angular 17 and venture an outlook on upcoming features in version 18.<\/p>\n","protected":false},"author":382,"featured_media":53881,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"ep_exclude_from_search":false,"footnotes":""},"tags":[128,339,70],"service":[444],"coauthors":[{"id":382,"display_name":"Pascal Decker","user_nicename":"pdecker"}],"class_list":["post-53407","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-angular","tag-state-of-the-web","tag-web","service-frontend"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Angular 17 Recap and What\u2019s Next? - inovex GmbH<\/title>\n<meta name=\"description\" content=\"With Angular v18, the next major release is just around the corner. We take another look at some of the latest features and developments in Angular 17 and venture an outlook on upcoming features in version 18.\" \/>\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.inovex.de\/de\/blog\/angular-17-recap-and-whats-next\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular 17 Recap and What\u2019s Next? - inovex GmbH\" \/>\n<meta property=\"og:description\" content=\"With Angular v18, the next major release is just around the corner. We take another look at some of the latest features and developments in Angular 17 and venture an outlook on upcoming features in version 18.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inovex.de\/de\/blog\/angular-17-recap-and-whats-next\/\" \/>\n<meta property=\"og:site_name\" content=\"inovex GmbH\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inovexde\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-17T09:49:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-17T10:16:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inovex.de\/wp-content\/uploads\/Angular-Update.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"880\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Pascal Decker\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.inovex.de\/wp-content\/uploads\/Angular-Update-1024x601.png\" \/>\n<meta name=\"twitter:creator\" content=\"@inovexgmbh\" \/>\n<meta name=\"twitter:site\" content=\"@inovexgmbh\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pascal Decker\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"3\u00a0Minuten\" \/>\n\t<meta name=\"twitter:label3\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data3\" content=\"Pascal Decker\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/angular-17-recap-and-whats-next\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/angular-17-recap-and-whats-next\\\/\"},\"author\":{\"name\":\"Pascal Decker\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/person\\\/c7ad5ab0de33468a381110192c787229\"},\"headline\":\"Angular 17 Recap and What\u2019s Next?\",\"datePublished\":\"2024-05-17T09:49:06+00:00\",\"dateModified\":\"2024-05-17T10:16:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/angular-17-recap-and-whats-next\\\/\"},\"wordCount\":403,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/angular-17-recap-and-whats-next\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/Angular-Update.png\",\"keywords\":[\"Angular\",\"State of the Web\",\"Web\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/angular-17-recap-and-whats-next\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/angular-17-recap-and-whats-next\\\/\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/angular-17-recap-and-whats-next\\\/\",\"name\":\"Angular 17 Recap and What\u2019s Next? - inovex GmbH\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/angular-17-recap-and-whats-next\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/angular-17-recap-and-whats-next\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/Angular-Update.png\",\"datePublished\":\"2024-05-17T09:49:06+00:00\",\"dateModified\":\"2024-05-17T10:16:04+00:00\",\"description\":\"With Angular v18, the next major release is just around the corner. We take another look at some of the latest features and developments in Angular 17 and venture an outlook on upcoming features in version 18.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/angular-17-recap-and-whats-next\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/angular-17-recap-and-whats-next\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/angular-17-recap-and-whats-next\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/Angular-Update.png\",\"contentUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/Angular-Update.png\",\"width\":1500,\"height\":880,\"caption\":\"Angular 17 update to Angular 18\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/angular-17-recap-and-whats-next\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular 17 Recap and What\u2019s Next?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#website\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/\",\"name\":\"inovex GmbH\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#organization\",\"name\":\"inovex GmbH\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/inovex-logo-16-9-1.png\",\"contentUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/inovex-logo-16-9-1.png\",\"width\":1921,\"height\":1081,\"caption\":\"inovex GmbH\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/inovexde\",\"https:\\\/\\\/x.com\\\/inovexgmbh\",\"https:\\\/\\\/www.instagram.com\\\/inovexlife\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/inovex\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UC7r66GT14hROB_RQsQBAQUQ\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/person\\\/c7ad5ab0de33468a381110192c787229\",\"name\":\"Pascal Decker\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fd950c0f5fcd5b8d6fd88272b1e034cadb4bbe1eba51dae2b0e09ad7a381318e?s=96&d=retro&r=gfc7c5fabadce20ec9e622b9190e43c05\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fd950c0f5fcd5b8d6fd88272b1e034cadb4bbe1eba51dae2b0e09ad7a381318e?s=96&d=retro&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fd950c0f5fcd5b8d6fd88272b1e034cadb4bbe1eba51dae2b0e09ad7a381318e?s=96&d=retro&r=g\",\"caption\":\"Pascal Decker\"},\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/author\\\/pdecker\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular 17 Recap and What\u2019s Next? - inovex GmbH","description":"With Angular v18, the next major release is just around the corner. We take another look at some of the latest features and developments in Angular 17 and venture an outlook on upcoming features in version 18.","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.inovex.de\/de\/blog\/angular-17-recap-and-whats-next\/","og_locale":"de_DE","og_type":"article","og_title":"Angular 17 Recap and What\u2019s Next? - inovex GmbH","og_description":"With Angular v18, the next major release is just around the corner. We take another look at some of the latest features and developments in Angular 17 and venture an outlook on upcoming features in version 18.","og_url":"https:\/\/www.inovex.de\/de\/blog\/angular-17-recap-and-whats-next\/","og_site_name":"inovex GmbH","article_publisher":"https:\/\/www.facebook.com\/inovexde","article_published_time":"2024-05-17T09:49:06+00:00","article_modified_time":"2024-05-17T10:16:04+00:00","og_image":[{"width":1500,"height":880,"url":"https:\/\/www.inovex.de\/wp-content\/uploads\/Angular-Update.png","type":"image\/png"}],"author":"Pascal Decker","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.inovex.de\/wp-content\/uploads\/Angular-Update-1024x601.png","twitter_creator":"@inovexgmbh","twitter_site":"@inovexgmbh","twitter_misc":{"Verfasst von":"Pascal Decker","Gesch\u00e4tzte Lesezeit":"3\u00a0Minuten","Written by":"Pascal Decker"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inovex.de\/de\/blog\/angular-17-recap-and-whats-next\/#article","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/blog\/angular-17-recap-and-whats-next\/"},"author":{"name":"Pascal Decker","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/c7ad5ab0de33468a381110192c787229"},"headline":"Angular 17 Recap and What\u2019s Next?","datePublished":"2024-05-17T09:49:06+00:00","dateModified":"2024-05-17T10:16:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/angular-17-recap-and-whats-next\/"},"wordCount":403,"commentCount":0,"publisher":{"@id":"https:\/\/www.inovex.de\/de\/#organization"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/angular-17-recap-and-whats-next\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/Angular-Update.png","keywords":["Angular","State of the Web","Web"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inovex.de\/de\/blog\/angular-17-recap-and-whats-next\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inovex.de\/de\/blog\/angular-17-recap-and-whats-next\/","url":"https:\/\/www.inovex.de\/de\/blog\/angular-17-recap-and-whats-next\/","name":"Angular 17 Recap and What\u2019s Next? - inovex GmbH","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/angular-17-recap-and-whats-next\/#primaryimage"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/angular-17-recap-and-whats-next\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/Angular-Update.png","datePublished":"2024-05-17T09:49:06+00:00","dateModified":"2024-05-17T10:16:04+00:00","description":"With Angular v18, the next major release is just around the corner. We take another look at some of the latest features and developments in Angular 17 and venture an outlook on upcoming features in version 18.","breadcrumb":{"@id":"https:\/\/www.inovex.de\/de\/blog\/angular-17-recap-and-whats-next\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inovex.de\/de\/blog\/angular-17-recap-and-whats-next\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/blog\/angular-17-recap-and-whats-next\/#primaryimage","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/Angular-Update.png","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/Angular-Update.png","width":1500,"height":880,"caption":"Angular 17 update to Angular 18"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inovex.de\/de\/blog\/angular-17-recap-and-whats-next\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inovex.de\/de\/"},{"@type":"ListItem","position":2,"name":"Angular 17 Recap and What\u2019s Next?"}]},{"@type":"WebSite","@id":"https:\/\/www.inovex.de\/de\/#website","url":"https:\/\/www.inovex.de\/de\/","name":"inovex GmbH","description":"","publisher":{"@id":"https:\/\/www.inovex.de\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inovex.de\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.inovex.de\/de\/#organization","name":"inovex GmbH","url":"https:\/\/www.inovex.de\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png","width":1921,"height":1081,"caption":"inovex GmbH"},"image":{"@id":"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inovexde","https:\/\/x.com\/inovexgmbh","https:\/\/www.instagram.com\/inovexlife\/","https:\/\/www.linkedin.com\/company\/inovex","https:\/\/www.youtube.com\/channel\/UC7r66GT14hROB_RQsQBAQUQ"]},{"@type":"Person","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/c7ad5ab0de33468a381110192c787229","name":"Pascal Decker","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/fd950c0f5fcd5b8d6fd88272b1e034cadb4bbe1eba51dae2b0e09ad7a381318e?s=96&d=retro&r=gfc7c5fabadce20ec9e622b9190e43c05","url":"https:\/\/secure.gravatar.com\/avatar\/fd950c0f5fcd5b8d6fd88272b1e034cadb4bbe1eba51dae2b0e09ad7a381318e?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/fd950c0f5fcd5b8d6fd88272b1e034cadb4bbe1eba51dae2b0e09ad7a381318e?s=96&d=retro&r=g","caption":"Pascal Decker"},"url":"https:\/\/www.inovex.de\/de\/blog\/author\/pdecker\/"}]}},"_links":{"self":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/53407","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/users\/382"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/comments?post=53407"}],"version-history":[{"count":5,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/53407\/revisions"}],"predecessor-version":[{"id":53883,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/53407\/revisions\/53883"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media\/53881"}],"wp:attachment":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media?parent=53407"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/tags?post=53407"},{"taxonomy":"service","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/service?post=53407"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/coauthors?post=53407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}