GEDOPLAN
Webprogrammierung

Angular 16/17: route input & input transform

Webprogrammierung
ng1516titel

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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Bitte füllen Sie dieses Feld aus.
Bitte füllen Sie dieses Feld aus.
Bitte gib eine gültige E-Mail-Adresse ein.
Sie müssen den Bedingungen zustimmen, um fortzufahren.

Autor

Diesen Artikel teilen

LinkedIn
Xing

Gibt es noch Fragen?

Fragen beantworten wir sehr gerne! Schreibe uns einfach per Kontaktformular.

Kurse

weitere Blogbeiträge

openapi 1
Webprogrammierung

Angular + OpenAPI Generator

In einem älteren Posting haben wir schon einmal einen Blick auf Swagger geworfen, eine charmante Möglichkeit aus den eigenen Rest-Schnittstellen…
IT-Training - GEDOPLAN
Java SE

Microbenchmarking mit JMH

Microbenchmarking in Java ist kein einfaches Thema. Dies liegt zum einen an den vielen Optimierungen, die der Compiler vornimmt und…

Work Life Balance. Jobs bei Gedoplan

We are looking for you!

Lust bei GEDOPLAN mitzuarbeiten? Wir suchen immer Verstärkung – egal ob Entwickler, Dozent, Trainerberater oder für unser IT-Marketing! Schau doch einfach mal auf unsere Jobseiten! Wir freuen uns auf Dich!

Work Life Balance. Jobs bei Gedoplan

We are looking for you!

Lust bei GEDOPLAN mitzuarbeiten? Wir suchen immer Verstärkung – egal ob Entwickler, Dozent, Trainerberater oder für unser IT-Marketing! Schau doch einfach mal auf unsere Jobseiten! Wir freuen uns auf Dich!