Angular 17.2 Signals Signals Signals

Kaum eingeführt, schon wieder besser. Trotz Minor Release Sprünge serviert Angular uns eine ganze Reihe cooler Features, bei denen der Hauptdarsteller klar ist: Signals. Hier ein Überblick über den Stand für Angular 17.2

Signal Inputs

(immutable) Komponenten-Inputs via signal anstatt @Import (computed() oder effect() ersetzen ngOnChanges)

  @Input({alias: 'oi', required: true, transform: (v: string) => v + '!'})
  oldInput!: string;

  signalInput = input.required({alias: 'si', transform: (v: string) => v + '! (better)'});

Signal Models

Two-Way Binding via model anstatt der Kombination aus @Input/@Output

  @Input()
  oldModelInput?: string;
  @Output()
  oldModelInputChanged = new EventEmitter<string>();
  
  newModel = model<string>();

<app-signals-io
oldModelInput=“Initial Value“
(oldModelInputChanged)=“ioOld = $event„
newModel=“Initial Value“
(newModelChange)=“ioNew = $event„
>

Signal Queries

viewChild / viewChildren signals anstatt @ViewChild / @ViewChildren

  @ViewChildren('out')
  oldSpans?: QueryList<HTMLSpanElement>;

  newSpans = viewChildren<HTMLSpanElement>('out')

Offensichtlich, wohin die Reise geht. Alle Zeichen stehen auf „signals“.

Live. In Farbe. Github.