Diese Reihe wirft einen kurzen Blick auf einige Highlights der Angular Versionen 16 und 17. Heute: “input transform” und “route input”.
Zwei eher kleine Features, die ganz nebenbei unser Entwickler-Leben einfacher machen, betreffen das Binding von Komponenten Inputs.
Input Transform
Bisher war es nötig einen getter und setter zu implementieren, wenn wir die Daten die wir per PropertyBinding an unsere Komponente übergeben bekommen umzuwandeln.
_oldSchool?: string;
@Input({required: true})
set oldSchool(v:string){
this._oldSchool = v.toUpperCase();
}
get oldSchool(){
return this._oldSchool;
}
Stattdessen kann nun eine transform callback Methode registriert werden, die diese Aufgabe etwas eleganter für uns erledigt
@Input({transform: (v:string) => v + ' with v16.1.0'})
valueTransformed?: string;
Route Input
Query- und Pfad-Parameter innerhalb unserer Komponenten zu verwenden, ist sicherlich täglich Brot für viele Entwickler. Dabei war der Abruf dieser Werte über den ActivatedRoute doch recht umständlich. Angular 16 erlaubt uns nun das Binding von diesen Parametern direkt an unsere Komponenten-Inputs. Dazu muss dieses Feature im ersten Schritt für das RouterModule aktiviert werden
// ngModule style
RouterModule.forRoot([], {
bindToComponentInputs: true
})
// standalone style
bootstrapApplication(AppComponent, {
providers: [
provideRouter(routes, withComponentInputBinding()),
]})
Routen wie:
{path: ‘route-input/:pathParam’, component: RouteInputComponent}
Werden jetzt direkt auf die entsprechenden @Input-Bindings gemappt. Ein weiterer Vorteil? Unserer Komponente kann jetzt problemlos als Routing-Target und als “normale” Kind-Komponente innerhalb unserer Anwendung Verwendung finden.
export class RouteInputComponent {
@Input()
pathParam?:string;
@Input()
query01?: string;
@Input()
query02?: number;
Wie immer. Live. In Farbe. bei Github
