{"id":2068,"date":"2024-05-22T17:42:30","date_gmt":"2024-05-23T00:42:30","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=2068"},"modified":"2024-05-22T17:42:31","modified_gmt":"2024-05-23T00:42:31","slug":"whats-new-in-angular-18","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/whats-new-in-angular-18\/","title":{"rendered":"What&#8217;s new in Angular 18?"},"content":{"rendered":"\n<p>The Angular team <a href=\"https:\/\/blog.angular.dev\/angular-v18-is-now-available-e79d5ac0affe\" target=\"_blank\" rel=\"noopener\" title=\"\">announced the release of Angular 18 earlier today<\/a>. You can read the official announcement for in-depth updates. In the meantime, I thought I would summarize the top 6 highlights of this new version here:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/blog.angulartraining.com\/angular-17-new-control-flow-syntax-4fbec4772d04\" title=\"Control flow syntax\">Control flow syntax<\/a> is now stable (no more dev preview), including useful warnings when not using the <code>track<\/code> option properly.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/angular-17-lazy-loading-with-defer\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Defer block<\/a> is also stable (no more dev preview) for lazy-loading Angular templates any way you want. You can read more about <code>@defer<\/code> <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/angular-17-lazy-loading-with-defer\/\" target=\"_blank\" rel=\"noopener\" title=\"\">here<\/a>, including these tutorials on <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/angular-17-trigger-options-for-defer\/\" target=\"_blank\" rel=\"noopener\" title=\"\">trigger options<\/a>, <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/customized-deferred-loading-with-when\/\" target=\"_blank\" rel=\"noopener\" title=\"\">custom triggers<\/a>, and how to <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/prefetching-with-the-defer-block\/\" target=\"_blank\" rel=\"noopener\" title=\"\">prefetch with @defer<\/a>.<\/li>\n\n\n\n<li>Zoneless change detection to unlock the full benefits of <a href=\"https:\/\/blog.angulartraining.com\/angular-signal-based-components-tutorial-4e4b4b1dfa96\" target=\"_blank\" rel=\"noopener\" title=\"\">signal-based components<\/a>. These <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/angular-change-detection-illustrated\/\" target=\"_blank\" rel=\"noopener\" title=\"\">diagrams on change detection<\/a> illustrate how much of a game changer this will be.<\/li>\n\n\n\n<li>Fallback content for <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/passing-custom-content-to-a-component-with-content-projection\/\" target=\"_blank\" rel=\"noopener\" title=\"\">content projection with <code>ng-content<\/code><\/a>. Here is how to use it to make the default content &#8220;Hello&#8221; in this example if the <code>select<\/code> query doesn&#8217;t return anything:<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"515\" height=\"41\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2024\/05\/image-10.png\" alt=\"\" class=\"wp-image-2069\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2024\/05\/image-10.png 515w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2024\/05\/image-10-300x24.png 300w\" sizes=\"auto, (max-width: 515px) 100vw, 515px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>New events Observable available on form controls, which returns any event going on in that control, including the different form state properties (valid, pristine, etc.)<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"804\" height=\"124\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2024\/05\/image-11.png\" alt=\"\" class=\"wp-image-2070\" style=\"width:707px;height:auto\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2024\/05\/image-11.png 804w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2024\/05\/image-11-300x46.png 300w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2024\/05\/image-11-768x118.png 768w\" sizes=\"auto, (max-width: 804px) 100vw, 804px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/blog.angular.dev\/angular-v18-is-now-available-e79d5ac0affe#:~:text=If%20the%20page%20hasn%E2%80%99t%20been%20hydrated%20yet%2C%20and%20thus%20is%20not%20interactive%2C%20all%20the%20user%20events%20would%20be%20lost.%20Starting%20in%20v18%20using%20event%20dispatch%2C%20Angular%20will%20start%20recording%20the%20user%20events.%20Once%20the%20application%20is%20hydrated%2C%20event%20dispatch%20replays%20them%20and%20we%20end%20up%20with%20six%20items%20in%20the%20cart.\" target=\"_blank\" rel=\"noopener\" title=\"\">Replaying events with server-side rendering<\/a>. When using SSR, any user actions that happen before the corresponding Javascript handler is downloaded can be replayed automatically using the provider:  <code>provideClientHydration(withEventReplay())<\/code><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>As always with major versions, there&#8217;s more, but this overview of Angular v18 should give you enough to get started. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Angular team announced the release of Angular 18 earlier today. You can read the official announcement for in-depth updates. In the meantime, I thought I would summarize the top 6 highlights of this new version here: As always with major versions, there&#8217;s more, but this overview of Angular v18 should give you enough to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-2068","post","type-post","status-publish","format-standard","hentry","category-angular"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2068","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=2068"}],"version-history":[{"count":1,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2068\/revisions"}],"predecessor-version":[{"id":2071,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2068\/revisions\/2071"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=2068"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=2068"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=2068"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}