angular - 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?

question from:https://stackoverflow.com/questions/38662155/how-to-two-way-bind-my-own-rxjs-subject-to-an-ngmodel

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)" />