Angular 16.1: Das Minor Release ist klein aber fein
Gemäß semantischer Versionierung bringt Angular 16.1 neben Bugfixes auch neue Funktionen, die jedoch nicht die Abwärtskompatibilität brechen.
- Rainer Hahnekamp
Das JavaScript-Framework Angular bringt in Version 16.1 als erste nennenswerte Neuerung die transform
-Funktion des @Input
Decorators. Damit kann Angular einen Wert in einen anderen Typ umwandeln, bevor es die Zuweisung zu der eigentlichen Variable durchführt. Neuerungen gibt es auch für den HttpClient
, der nun mit fetch
umgehen kann.
Einsatz der neuen transform-Funktion
Die transform
-Funktion ist hauptsächlich für die Umwandlung von Datentypen konzipiert. Sollte mehr Logik notwendig sein, sollte man nach wie vor den OnChanges
Lifecycle Hook verwenden.
@Component({
selector: 'app-customers',
template: `<p>Selecting customer {{id}}</p>`,
standalone: true,
})
export class CustomersComponent {
// Route: /customers/:id
@Input({transform: (value: string) => Number(value)}) id: number = 0;
}
Die Möglichkeit, direkt Routenparameter einer @Input
-Variable zuzuweisen, macht diese neue Funktion nötig. Die Routenparameterzuweisung existiert erst seit Version 16.
Diese Routenparameter sind immer vom Typ string
. Da ein derartiger Parameter sehr häufig eine ID einer Entität ist, möchte man als Datentyp number
verwenden. Bis dato war dafür entweder eine setter
-Methode oder der oben genannte Lifecycle Hook notwendig.
transform
bietet sich für das ursprüngliche Szenario, in dem eine Elternkomponente einen Wert an seine Kinder übergibt, nicht an. Technisch gesehen ist es zwar möglich, allerdings gibt es bei der Kommunikation zwischen Komponenten ohnehin die Möglichkeit, einen beliebigen Datentyp zu verwenden.
HttpClient lernt den Umgang mit fetch
Die zweite Ergänzung betrifft den HttpClient
. Dieser kann nun intern statt xhr
auch fetch
verwenden.
Der HttpClient
stammt aus einer Zeit, als noch nicht jeder Browser mit einem fetch
umgehen konnte. Mittlerweile hat sich diese Situation jedoch verbessert.
Was nach einem unscheinbaren Detail aussieht, bedeutet jedoch eine große Erleichterung im Backend. Sollte Angular mit SSR (Server-side Rendering) aktiv sein, so kann nun Node.js das native fetch
verwenden. Bis dato war hier immer ein Ausweichen auf externe Bibliotheken nötig, die xhr
bereitstellen.
Die Unterstützung für fetch
muss über die Konfiguration eingestellt werden:
export const appRoutes = [{
path: 'xhr',
providers: [provideHttpClient()],
component: XhrComponent,
}, {
path: 'fetch',
providers: [provideHttpClient(withFetch())],
component: FetchComponent,
}];
Das obige Beispiel bietet zwei Instanzen des HttpClient
. Im Normalfall stellen Entwicklerinnen und Entwickler aber eine Instanz bereit und verwenden dazu die main.ts.
Neue Direktiven
Daneben gab es unmittelbar nach der Veröffentlichung von Angular 16.1 weitere Neuerungen in Form von zwei RFCs.
So wird es für die "Zeit nach zone.js" neue Direktiven samt Syntax geben, die den Kontrollfluss steuern. Das betrifft zum Beispiel *ngIf
oder *ngFor
.
Darüber hinaus wird es eine defer
-Direktive zum dynamischen Laden von Komponenten geben. Je nach Ladezustand lässt sich dabei spezielles HTML für den Lade- oder Fehlerzustand definieren. Diese Funktion ist dem suspense
-Feature von React sehr ähnlich.
Weitere Informationen zu Angular 16.1 lassen sich einem Blogeintrag sowie dem GitHub-Repository entnehmen.
(mai)