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

app.component.ts

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

    {{ rate }}
  `,
})
export class AppComponent {
  form: FormGroup;

  get rate(): AbstractControl {
    return this.form.controls.rating;
  }

  constructor(private fb: FormBuilder) {
    this.fb.group({
      rating: [1],
    });
  }
}

two-way.component.ts

@Component({
  selector: 'two-way',
  template: `
    <ng-template contextDisposer="rate" let-control="rate">
      <rating *ngIf="control" [formControl]="control"></rating>
    </ng-template>
  `,
})
export class TwoWayComponent {}