Angular 17.3: New features

• What's included
  • TypeScript 5.4
  • Attribute injection on the host node
  • Developer preview: expose new output() API, outputFromObservable(), outputToObservable (#54650)
  • outputFromObservable
  • outputToObservable
• GuardResult: feat(router): Add reusable types for router guards
• Angular Material 17.3
  • add advanced marker
  • Customizable long press delay (for touch devices)
• What's new in version 17.x

Release date: 2024-03-14
Release notes: 17.3.0

Here a list of what can be useful in the daily activity of a developer.
Compiler improvement and bugfixes are not included.

If you want to test the new features you need the next version of Angular. For an existing project you can upgrade using ng update @angular/cli @angular/core --next

What's included

TypeScript 5.4

Angular 17.3 will officially support TypeScript 5.4: https://github.com/angular/angular/pull/54414

Attribute injection on the host node

A new HostAttributeToken has been added to inject static attributes of the host node, similar to the attribute directives

Example from the Angular documentation:

import {HostAttributeToken, inject} from '@angular/core'; 
 
@Directive() 
class MyDir { 
  attr: string = inject(new HostAttributeToken('some-attr')); 
} 

If the attribute doesn't exist the HostAttributeToken will throw an error, behaving differently from attribute directives that are returning null.

Here you can find the official documentation: https://next.angular.io/api/core/HostAttributeToken

Developer preview: expose new output() API, outputFromObservable(), outputToObservable (#54650)

With the first RC we have a big change, the output() API is exposed. These are some benefits (lazily copied from GitHub):

• _Symmetrical API to input(), model() etc.
• Fixed types for EventEmitter.emit— current emit method of EventEmitter is broken and accepts undefined via emit(value?: T)
• Removal of RxJS specific concepts from outputs. error channels, completion channels etc. We now have a simple consistent interface.
• Automatic clean-up of subscribers upon directive/component destory when subscribed programmatically._

The new output() works like the existing @Outputannotation.

@Output() 
orderReceived = new EventEmitter<Order>(); 
 
// can be replaced with 
 
orderReceived = output<Order>(); 

Other examples from the Angular repository:

import {output} from '@angular/core'; 
 
@Directive({..}) 
export class MyDir { 
  nameChange = output<string>();     // OutputEmitterRef<string> 
  onClick = output();                // OutputEmitterRef<void> 
 
  doSomething() { 
    this.onClick.emit(); 
  } 
} 

outputFromObservable

Declares an Angular output that is using an RxJS observable as a source for events dispatched to parent subscribers.

import {outputFromObservable} from '@angular/core/rxjs-interop'; 
 
 @Directive({..}) 
 export class MyDir { 
   nameChange$ = new BehavorSubject<string>(); 
   nameChange = outputFromObservable(this.nameChange$); // OutputRef<string> 
} 

The nameChange$ observable is transformed in an output and the value is emitted

Official documentation

outputToObservable

Converts an Angular output declared via output() or outputFromObservable() to an observable.

import {outputToObservable} from '@angular/core/rxjs-interop'; 
 
outputToObservable(myInstance.someOutput) 
  .pipe(take(1)) 
  .subscribe(...) 

Official documentation

GuardResult: feat(router): Add reusable types for router guards

According to the PR:

This refactor makes it easier to update the return types of guards. Rather than having to track what types guards can return, which may change with new features over time, MaybeAsync can be used instead.

Official Documentation

Angular Material 17.3

Release: 17.3.0-next.0

add advanced marker

The advanced marker for Google Maps has been added.

Here you can find the Google Maps documentation

Example in Angular:

  <map-advanced-marker 
    #secondMarker="mapAdvancedMarker" 
    (mapClick)="clickAdvancedMarker(secondMarker)" 
    title="Advanced Marker" 
    [gmpDraggable]="false" 
    [position]="mapAdvancedMarkerPosition" 
  ></map-advanced-marker> 

 clickAdvancedMarker(advancedMarker: MapAdvancedMarker) { 
    this.infoWindow.openAdvancedMarkerElement( 
      advancedMarker.advancedMarker, 
      advancedMarker.advancedMarker.title, 
    ); 
  } 

Customizable long press delay (for touch devices)

PR: feat(material/tooltip): be able to customize the longpress delay #27512

The tooltip panel has a new option touchLongPressShowDelay (default 500ms) to delay the launch of events.

  /** Time between the user putting the pointer on a tooltip trigger and the long press event being fired on a touch device. */ 
  touchLongPressShowDelay?: number; 

What's new in version 17.x

Angular 17.2 is the last official version released on February 14th, 2024.

Post about Angular 17.2: https://marmo.dev/angular-17-2-features

Angular 17.1 has been released on January 17th, 2024.

You can find a list of changes (more than 10) relevant for developers here: https://marmo.dev/angular-17-1-features