{"id":2120,"date":"2024-07-17T15:23:16","date_gmt":"2024-07-17T22:23:16","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=2120"},"modified":"2024-07-17T15:23:17","modified_gmt":"2024-07-17T22:23:17","slug":"whats-new-in-angular-18-1","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/whats-new-in-angular-18-1\/","title":{"rendered":"What’s new in Angular 18.1?"},"content":{"rendered":"\n

Last week, I covered the new @let<\/code> syntax to create local variables<\/a> in our HTML templates. <\/p>\n\n\n\n

Let’s review some other notable updates from Angular 18.1.<\/p>\n\n\n\n

toSignal() custom equality function<\/h4>\n\n\n\n

Remember the toSignal<\/a><\/code> function to convert an Observable into a Signal? This function now supports an equal<\/code> parameter to pass a custom equality function. You can read this tutorial on Signal equality functions<\/a> for more information and examples.<\/p>\n\n\n\n

RouterLink with UrlTree<\/h4>\n\n\n\n

You’ve probably used UrlTree<\/code> objects in Angular route guards<\/a> to implement redirects when a user isn’t logged in, for instance. It is now possible to use UrlTree<\/code> with RouterLink<\/code>, too, so you can do something like this:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

After defining userPath<\/code> as a UrlTree<\/code> as follows:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Diagnostic for uninvoked functions<\/h4>\n\n\n\n

An added diagnostic throws an Angular error<\/a> if you make a mistake in your template syntax. If you do (click)=\"save\"<\/code> instead of (click)=\"save()\"<\/code>.<\/p>\n\n\n\n

There are some other changes under the hood and some updates to unstable APIs, but I’ll cover those when the changes are finalized and become stable. <\/p>\n","protected":false},"excerpt":{"rendered":"

Last week, I covered the new @let syntax to create local variables in our HTML templates. Let’s review some other notable updates from Angular 18.1. toSignal() custom equality function Remember the toSignal function to convert an Observable into a Signal? This function now supports an equal parameter to pass a custom equality function. You can […]<\/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-2120","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\/2120","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=2120"}],"version-history":[{"count":2,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2120\/revisions"}],"predecessor-version":[{"id":2124,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2120\/revisions\/2124"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=2120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=2120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=2120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}