Angular 17.1: New features

Updated: 2024-01-26

The official list of changes is available here:

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.


In routerLink we can add an info property.

<a routerLink="/router-info" [info]="'Coming from main'"> 
    Show router info 
info?: string; 
constructor(private router: Router){ = this.router.getCurrentNavigation()? as string; 

GitHub references:,
Angular documentation:

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:

        [year]="2024" ></app-input-signals> 

GitHub reference:,

Core: Official support for TypeScript 5.3

Here you can find the new features of TypeScript 5.3:

GitHub reference:

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:

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.

GitHub reference:

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:

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

A new version of date-fns has been released (, 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:

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


import {Component} from '@angular/core'; 
import {YouTubePlayer} from '@angular/youtube-player'; 
  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


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

GitHub reference:

Angular CLI

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

Here the summary:

You could be interested in

Right click context menu with Angular

Right click custom menu inside dynamic lists with Angular Material

Enums in Angular templates

How to use enum in the html template
Fullstack Angular / Java application quick start guide.
WebApp built by Marco using SpringBoot 3.2.4 and Java 21. Hosted in Switzerland (GE8).