{"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":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t