Angular 16.1: Das Minor Release ist klein aber fein

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.

Lesen Sie auch

Angular 16: Das größte Release seit dem initialen Rollout von Angular

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)