Angular 15 setzt mit Directive Composition ein seit Jahren gefragtes Feature um

Ein knappes halbes Jahr nach Angular 14 hat Google die fünfzehnte Hauptversion des JavaScript-Frameworks herausgegeben. Das Release setzt mit der Directive Composition API einen seit Jahren stark gefragten Feature Request auf GitHub um. Außerdem stabilisiert es sowohl die Standalone API als auch die Image Directives.

Zusammengesetzte Direktiven

Der Issue, der die nun eingeführte Directive Composition API angeregt hat, existiert seit sechs Jahren auf GitHub. Die API bringt einen Weg zur Wiederverwertung von Code jenseits der klassischen Vererbung. Es ermöglicht das Einbinden und Kombinieren von Direktiven in Komponenten und anderen Direktiven über die Property hostDirectives.

Ähnlich wie sich Funktionen in JavaScript über Composition zusammensetzen lassen, ermöglicht Directive Composition das Kombinieren einzelner Direktiven zu einer komplexeren. Das einbindende Element kann wahlweise komplette Direktiven verwenden oder nur ausgewählte Teile, wie folgendes Codebeispiel aus dem Angular-Blog zeigt:

@Component({
  selector: 'mat-menu',
  hostDirectives: [HasColor, {
    directive: CdkMenu,
    inputs: ['cdkMenuDisabled: disabled'],
    outputs: ['cdkMenuClosed: closed']
  }]
})
class MatMenu {}

Der Code verwendet das vollständige HasColor, aber nur die angegebenen Inputs und Outputs aus CdkMenu. Die für die Composition verwendeten Direktiven müssen Standalone Directives sein.

Stabil selbstständig

Angular 14 hat im Juni Standalone Components und APIs eingeführt. Sie ermöglichen das Schreiben von Anwendungen ohne NgModules. Bisher hatte die API den Status Developer Preview, und mit dem aktuellen Release gilt sie als stabil. Das gilt auch für die in Angular 14.2. ergänzte Router API mit der Funktion provideRouter.

Letztere erlaubt zudem das Tree Shaking, also das Beseitigen von überflüssigem Code. Laut dem Angular-Blog ist die Umsetzung des Routers etwa 11 Prozent schlanker, wenn die Bundler beim Build den nicht benötigten Code entfernen.

enterJS-Thementag: Web-Performance

Die Veranstalter heise Developer, iX und dpunkt.verlag richten am am 1. Dezember 2022 den enterJS Web-Performance Day aus. Expertinnen und -Experten zeigen in sieben Online-Vorträgen, wie sich Webanwendungen beschleunigen lassen. Ein Vortrag widmet sich kontextbezogene Template States mit Angular.

Die Image Directive zum Optimieren von Bildern, die mit Angular 14.2 Einzug in das Framework gehalten hat und bisher als Preview gekennzeichnet war, gilt im aktuellen Release ebenfalls als stabil.

Weniger Boilerplate Code

Neben der Tree Shakeable Router API bringt Angular 15 weitere Neuerungen, die den Boilerplate Code verringern sollen. Unter anderem bieten Functional Router Guards einen schlankeren Ansatz, um Guards direkt in der Deklaration umzusetzen, wie folgender Code aus dem Angular-Blog zeigt:

// traditionelle Umsetzung
@Injectable({ providedIn: 'root' })
export class MyGuardWithDependency implements CanActivate {
  constructor(private loginService: LoginService) {}

  canActivate() {
    return this.loginService.isLoggedIn();
  }
}

const route = {
  path: 'somePath',
  canActivate: [MyGuardWithDependency]
};

// Umsetzung mit Functional Router Guards
const route = {
  path: 'admin',
  canActivate: [() => inject(LoginService).isLoggedIn()]
};

Weitere Neuerungen in Angular 15 wie die präziseren Stack Traces und Ergänzungen bei den Komponenten lassen sich dem Angular-Blog entnehmen.

(rme)