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

app.component.ts

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

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

  get pre(): number {
    return this.rate;
  }

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

two-way.component.ts

@Component({
  selector: 'two-way',
  template: `
    <rating
      contextConsumer
      [contextMap]="{rate: 'value', pre: 'preValue', onRating: 'onChange'}"
    ></rating>
  `,
})
export class TwoWayComponent {}