Die Funktion model() erzeugt ein beschreibbares Signal, das automatisch sowohl einen Input als auch einen Output erzeugt und damit die Zwei-Wege-Bindungssyntax [(value)] ermöglicht, ohne manuell ein @Input/@Output-Paar zu verdrahten. Intern generiert Angular einen 'valueChange'-Output, der bei jedem Setzen des Signals feuert, sodass Elternkomponenten ohne RxJS-Subjects oder manuelle emit-Aufrufe synchron bleiben. Das reduziert Boilerplate, die früher ein Getter/Setter-Paar oder einen @Output EventEmitter erforderte, während der interne Zustand der Komponente ein echtes Signal bleibt, das in computed() und effect() nutzbar ist.
import { Component, model } from '@angular/core';@Component({selector: 'app-rating',standalone: true,template: `<button*ngFor="let star of stars"(click)="setValue(star)"[class.filled]="star <= value()">★</button>`,})export class RatingComponent {value = model<number>(0);readonly stars = [1, 2, 3, 4, 5];setValue(star: number): void {if (star === this.value()) {this.value.set(0);return;}this.value.set(star);}}// Parent usage: <app-rating [(value)]="userRating" />
