Angular 17.1 Is Out: What's New? (Top 8 New Features)

The Angular team continues its journey towards full signal-based reactivity across the framework. The recent Angular 17.1 release marks a significant milestone on this path.

The headline feature of this version is the introduction of Signal Inputs, but there are several other notable improvements worth exploring. Let's take a closer look at what this release brings.

Contents Overview

• Signal Inputs
• Router's new info parameter
• Web Test Runner
• Enhanced control flow migration
• Application builder migration
• Development server keyboard shortcuts
• Angular Material hydration support
• TypeScript and Vite upgrades
• Wrap-up

Signal Inputs

The most substantial addition in Angular 17.1 is undoubtedly signal inputs. This feature introduces a signal-based approach to component inputs, offering a modern alternative to the classic @Input decorator.

This post provides a concise overview. For a comprehensive guide on Angular Signals, you can refer to this detailed article: Angular Signal Inputs.

Here is a basic example of how a signal input is defined:

@Component({
  selector: "counter",
  standalone: true,
  template: ` <h1>Counter value: {{ value() }}</h1>`,
})
export class CounterComponent {
  value = input(0);
}

Your input value is now a signal! This finally gives Angular developers a reactive primitive for component inputs.

In the template, you'll notice that to read the value of the signal, you need to call it as a function using ().

For a more in-depth look, you can watch this video from the Angular University YouTube channel:

Router's New info Parameter

Another new feature is an advanced router option known as the info parameter. This allows you to pass extra data during navigation.

Here's an example of how to use it:

<button (click)="onIncrement()">
    Increment
</button>

<button 
    routerLink="home" 
    [info]="{hello: 'world'}">
    Navigate to Home
</button>

This means you can now attach a transient info object to your router navigations.

This object is included as part of the NavigationExtras object.

You can retrieve the data on the receiving end like this:

@Component({...})
export class HomeComponent {

  constructor(private router: Router) {

  }

  ngOnInit() {
    this.router.events
      .pipe(
        filter((e) => e instanceof NavigationEnd),
        map((e) =>
            this.router
                .getCurrentNavigation()
                    ?.extras.info)
      )
      .subscribe((info) => {
        console.log(info);
      });
  }
}

You can pass the info parameter both programmatically and through the declarative router link API.

By accessing the current navigation, you can grab the info parameter from the extras object.

It's important to note that the info parameter is not saved in the browser's history API. So, if you navigate back or forward, the information won't be persisted in the URL.

For instance, clicking a Navigate to Home button that uses this parameter will not show anything extra in the URL—the data remains untracked in the history stack.

The info parameter is designed for transient data flow that you might need for a specific navigation action, but which shouldn't clutter the URL.

While this might not be a daily-use feature for everyone, it offers a standard Angular API for those times you need to transmit temporary data during a route change without affecting the URL.

New Web Test Runner

Angular 17.1 also introduces the Web Test Runner. This browser-based test runner is positioned as the future replacement for the aging Karma test runner, which is over a decade old.

To start using it, you'll need to install the following package in your project:

npm install @web/testrunner --save-dev

It's worth noting that while the test runner itself is production-ready, its Angular integration is still considered experimental.

Here is a step-by-step guide to switch from Karma to the Web Test Runner:

• Open your angular.json configuration file.
• Locate the builder setting for your test task.

"test": {
  "builder": "@angular-devkit/build-angular:karma",
  "options": {
    "main": "src/test.ts",
    "karmaConfig": "./karma.conf.js",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "src/tsconfig.spec.json",
    "scripts": [],
    "styles": [
      "src/styles.scss"
    ],
    "assets": [
      "src/assets",
      "src/favicon.ico"
    ]
  }
},

• Then, simply change the builder from karma to web-test-runner in the configuration.

"test": {
  "builder": "@angular-devkit/build-angular:web-test-runner",
  "options": {
    "main": "src/test.ts",
    "karmaConfig": "./karma.conf.js",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "src/tsconfig.spec.json",
    "scripts": [],
    "styles": [
      "src/styles.scss"
    ],
    "assets": [
      "src/assets",
      "src/favicon.ico"
    ]
  }
},

Once you've made this change, running your tests with the standard ng test command will utilize the new Web Test Runner.

Enhanced Control Flow Migration

The Angular CLI has seen several improvements to its migration tooling in this release.

The existing control flow migration has been updated with numerous bug fixes and new features. For projects that haven't yet made the switch, this migration can help you move from *ngFor, *ngIf, and *ngSwitch to the new syntax using @if, @for, and @switch. You can trigger it with:

ng generate @angular/core:control-flow

Keep in mind that this migration remains in developer preview, but this improved version makes it a more viable option to try.

Application Builder Migration

Continuing with CLI migrations, there is a new tool available for projects looking to adopt the new application builder.

This migration will update your angular.json file to configure your project to use the new builder:

ng update @angular/cli --name =use-application-builder

New Angular CLI Development Server Shortcuts

The development server's developer experience has been enhanced with a few new keyboard shortcuts.

You will now see a new message in the terminal output from the development server:

Application bundle generation complete. [0.281 seconds]
Watch mode enabled. Watching for file changes...

Local: http://localhost:4200/
press  + enter to show help

By pressing H followed by Enter, you can access a range of useful shortcuts that weren't available before.

• r + enter: forces a reload of the browser.

• u + enter: displays the server URL currently in use.

• o + enter: opens a new browser window pointing to the development server.

• c + enter: clears the terminal console.

• q + enter: quits the development server.

• These shortcuts provide a noticeable boost to efficiency—a welcome improvement to the developer workflow.

Angular Material Support for SSR Client Hydration

The Angular Material Library has received some important updates in this release.

All Angular Material components are now Standalone by default and come with full support for server-side rendering (SSR) client hydration.

This is particularly beneficial for apps using Angular Material with SSR: with client-side hydration enabled, the browser can avoid re-rendering everything the server already generated, leading to better performance.

For a detailed explanation of client hydration and SSR mechanics, check out this video: The Angular SSR Deep dive.

TypeScript and Vite Upgrades

The Angular CLI has also been updated to leverage TypeScript 5.3 and Vite 5 for the build process.

That rounds out the highlights for Angular 17.1, a pretty packed release.

If you want to stay informed about future Angular releases and receive a similar summary via email, you can subscribe to the newsletter.

You'll also get the latest news on the broader Angular ecosystem.

For a deep dive into all the features of Angular Core, including Signals, take a look at the Angular Core Deep Dive Course:

Wrap-up

This post provided a snapshot of the eight main features that have arrived with Angular 17.1.

The most critical update is signal inputs, which serve as a signal-based alternative to the traditional @Input decorator.

This marks a significant advancement in Angular's signal-based reactivity story, and it's expected that we'll see more signal-centric features in the coming releases.

If you have any questions or comments, feel free to ask.