Angular 17.3: New features
- What's included
- GuardResult: feat(router): Add reusable types for router guards
- Angular Material 17.3
- 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 @Output
annotation.
@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
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(...)
GuardResult: feat(router): Add reusable types for router guards
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
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