Angular 17.1: New features

• Router: Add info property to NavigationExtras
• Core: Signal Inputs
• Core: Official support for TypeScript 5.3
• Router: Add router configuration to resolve navigation promise on error
• Router: Allow onSameUrlNavigation: 'ignore' in navigateByUrl
• Angular Material / Angular Components
  • add support for date-fns 3 (from version 2.x)
  • add a YouTube player
  • improvement to Google Maps component
  • ability to interact with disabled buttons
• Angular CLI

The official list of changes is available here: https://github.com/angular/angular/releases/tag/17.1.0

Router: Add info property to NavigationExtras

A new transient navigation info is added to the navigation properties. The information is available for the duration of the navigation.

This avoids to create a service or state object to store this information, with the consequence of adding the information to the Navigation History.

A common use case would be view transitions and animations.

Example:

In routerLink we can add an info property.

<a routerLink="/router-info" [info]="'Coming from main'"> 
    Show router info 
</a> 

info?: string; 
constructor(private router: Router){ 
    this.info = this.router.getCurrentNavigation()?.extras.info as string; 
} 

GitHub references: https://github.com/angular/angular/pull/53303, https://github.com/angular/angular/pull/53784
Angular documentation: https://angular.io/api/router/NavigationBehaviorOptions#info

Core: Signal Inputs

Now signals can be declared as @Input() without an explicit decorator.

You can for example:

  firstName = input<string>();            // string|undefined 
  lastName = input.required<string>();    // string mandatory 
  age = input(0);                         // number with default value 
  year: InputSignal<any,number> = input() // explicit declaration 

In the HTML you can use the signals:

<app-input-signals 
        [firstName]="'Marco'" 
        [lastName]="'Molteni'" 
        [year]="2024" ></app-input-signals> 

Documentation: https://angular.io/api/core/InputSignal
GitHub reference: https://github.com/angular/angular/pull/53872, https://github.com/angular/angular/pull/53521

Core: Official support for TypeScript 5.3

Here you can find the new features of TypeScript 5.3: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-3.html

GitHub reference: https://github.com/angular/angular/pull/52572

Router: Add router configuration to resolve navigation promise on error

A new parameter is added to the Router: resolveNavigationPromiseOnError. If set to true a navigation error will resolve the Promise with false.
If not true a navigation error will reject the Promise. In this case, the developer has to catch the exception and handle it.

GitHub reference: https://github.com/angular/angular/pull/48910

Router: Allow onSameUrlNavigation: 'ignore' in navigateByUrl

Until now onSameUrlNavigation was restricted to reload. With the new release ignore is supported.

ignore simply ignores the request if this is the same as the current state.
reload processes the URL even if it corresponds to the same state.

Example: router.navigateByUrl('/myRoute', {onSameUrlNavigation: 'ignore'});

In this case if the state is already '/myRoute', there is no Navigation.

Documentation: https://angular.io/api/router/OnSameUrlNavigation#description
GitHub reference: https://github.com/angular/angular/pull/52265

Angular Material / Angular Components

There are a lot of moving parts for Angular Material and not everybody is interested in Angular Material. For this reason only few new features will be listed here.

Here the official list: https://github.com/angular/component/releases/tag/17.1.0

add support for date-fns 3 (from version 2.x)

A new version of date-fns has been released (https://blog.date-fns.org/v3-is-out/), Angular added the adapter to use this library.

We already documented the migration from momentjs to day.js in this post: Angular momentjs and the optimization bailouts warning

GitHub reference: https://github.com/angular/components/issues/28357

add a YouTube player

This component is a wrapper around the YouTube official API.

Here you can find the documentation: Angular YouTube Player Component

Install: ng add @angular/youtube-player

Example:

import {Component} from '@angular/core'; 
import {YouTubePlayer} from '@angular/youtube-player'; 
 
@Component({ 
  standalone: true, 
  imports: [YouTubePlayer], 
  template: '<youtube-player videoId="mVjYG9TSN88"/>', 
  selector: 'youtube-player-example', 
}) 
export class YoutubePlayerExample {} 

improvement to Google Maps component

The component now uses the most recent Dynamic Library Import API.

The previous version was using a deprecated (but still supported) library.

Install: ng add @angular/google-maps

Documentation: Angular Google Maps component

ability to interact with disabled buttons

In previous versions, native buttons didn't allow to dispatch events. The new feature add the possibility to
style buttons as disabled and set aria-disabled='true' without setting the native attribute to disabled.

I already wrote about this issue in the past: Angular Material: Display a tooltip on a disabled button

Example:

<button 
  mat-raised-button 
  disabled 
  disabledInteractive 
  matTooltip="This is a tooltip!">Disabled button allowing interactivity</button> 
 
<button 
  mat-raised-button 
  disabled 
  matTooltip="This is a tooltip!">Default disabled button</button> 

GitHub reference: https://github.com/angular/components/commit/f23d8c1f7e828cc1d4d9d08cd6117507f979fcb5

Angular CLI

I didn't have the time to go through the changes yet.

Here the summary: https://github.com/angular/angular-cli/releases/tag/17.1.0