Angular Context - Two-way Data-binding (#2) #blog

app.component.ts

@Component({
  selector: 'my-app',
  template: `
    <context-provider provide="rate onRating">
      <two-way></two-way>
    </context-provider>

    {{ rate }}
  `,
})
export class AppComponent {
  rate = 1;

  onRating = (value: number) => {
    this.rate = value;
  }
}

two-way.component.ts

@Component({
  selector: 'two-way',
  template: `
    <context-consumer consume="rate onRating"></context-consumer>

    <rating
      [ngModel]="rate"
      (ngModelChange)="onRating($event)"
    ></rating>
  `,
})
export class TwoWayComponent {
  rate: number;
  onRating: (rate: number) => void;
}