{"id":1943,"date":"2024-01-24T05:00:00","date_gmt":"2024-01-24T13:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1943"},"modified":"2024-01-23T15:13:57","modified_gmt":"2024-01-23T23:13:57","slug":"whats-new-in-angular-17-1","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/whats-new-in-angular-17-1\/","title":{"rendered":"What’s new in Angular 17.1?"},"content":{"rendered":"\n

Angular 17.1 brings new features to the framework and goes one step further towards signal-based components<\/a> with the introduction (as a developer preview) of Signal inputs<\/a>.<\/p>\n\n\n\n

What’s a Signal input?<\/h3>\n\n\n\n

Instead of using the @Input<\/code> decorator, we can now use the input() function from @angular\/core<\/code>. This function creates an input value that is received as a signal. Here is an example:<\/p>\n\n\n

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

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

Since name<\/code> is a signal, it can be read like so:<\/p>\n\n\n

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

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

There are several benefits to that approach. For instance, you can derive a value from that input without using ngOnInit<\/code> or ngOnChanges<\/code>. Instead, we can use computed<\/a><\/code>:<\/p>\n\n\n

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

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

You can see the above code in action on Stackblitz<\/a>.<\/p>\n\n\n\n

The new API also supports required inputs with the input.required<\/code> function to ensure a value is passed to the component\/directive:<\/p>\n\n\n

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

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

Router<\/h3>\n\n\n\n

We can now pass information to a route using the info<\/code> option as follows:<\/p>\n\n\n

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

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

Or using the router<\/a><\/code> service:<\/p>\n\n\n

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

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

This info<\/code> object is not persisted in the browser session history, unlike the state<\/code> option, which can also be used to pass data to a route.<\/p>\n\n\n

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

Application builder migration<\/h3>\n\n\n\n

If you still need to migrate to the new Vite-based application builder<\/a>, you can do so with one simple CLI command now:<\/p>\n\n\n

ng<\/span> update<\/span> @angular<\/span>\/cli --name=use-application-builder<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
<\/p>\n\n\n\n
Unit tests without a browser<\/h3>\n\n\n\n
Another exciting update is an addition to the ng test<\/code> command so you can run your unit tests without opening a browser, which is perfect for continuous integration, for instance:<\/p>\n\n\n
ng test --no-browsers<\/code><\/span><\/pre>\n\n\n
<\/p>\n\n\n\n
These are the most essential changes in Angular 17.1. I’d say it’s a pretty good release!<\/p>\n","protected":false},"excerpt":{"rendered":"
Angular 17.1 brings new features to the framework and goes one step further towards signal-based components with the introduction (as a developer preview) of Signal inputs. What’s a Signal input? Instead of using the @Input decorator, we can now use the input() function from @angular\/core. This function creates an input value that is received as […]<\/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-1943","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\/1943","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=1943"}],"version-history":[{"count":2,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1943\/revisions"}],"predecessor-version":[{"id":1952,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1943\/revisions\/1952"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1943"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1943"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1943"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}