How to two-way bind my own RxJS Subject to an [(ngModel)]?

Question

Is there a short and simple way to pass an RxJS Subject or BehaviorSubject to an an Angular 2 directive for two-way binding? The long way to do it would be as follows:

@Component({     template: `         <input type="text" [ngModel]="subject | async" (ngModelChange)="subject.next($event)" />     ` }) 

I'd like to be able to do something like this:

@Component({     template: `         <input type="text" [(ngModel)]="subject" />     ` }) 

I believe the async pipe is only one-way, so that's not enough. Does Angular 2 provide a short and simple way to do this? Angular 2 uses RxJS too, so I expected there to be some inherent compatibility.

Could I perhaps create a new ngModel-like directive to make this possible?

Answer 1

This is a simple solution, as you said in your question. I think there's nothing simpler than what you already provided.

<input type="text"         [ngModel]="subject | async"        (ngModelChange)="subject.next($event)" />