Is it possible to perform a two way binding on a custom directive with ngModel?

Question

My use case is completely different. When I strip off all the other factors, it boils down to this.

Say I have the following input element

<input type="text" [customDirective] [(ngModel)]="myValue" >

The job of this customDirective is to look into value entered by the user and changed its value based on the input on the fly.

How to achieve two-way binding for this.

I played around with ControlValueAccessor, DefaultValueAccessor. But no matter what I do, I was not able to achieve the two-way binding. The maximum I achieved at one time is view update on model update but not the other way round. But that code is somewhere lost.

Here is the vanilla plunker link.

PS: I already referred the following. But none of them were helpful in achieving 2-way binding w.r.t to directive

http://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

angular2 wysiwyg tinymce implementation and 2-way-binding

Thanks in advance

you can do the same by using Pipe for it – ranakrunal9 Nov 21 '16 at 05:36 — ranakrunal9, Nov 21 '16 at 05:36
@ranakrunal9 how pipe would change the value of `ngModel`? – Pankaj Parkar Nov 21 '16 at 05:40 — Pankaj Parkar, Nov 21 '16 at 05:40

score 1 · Accepted Answer · answered Nov 22 '16 at 03:57

Finally figured out how to do this.

Model to UI changes can be done using ControlValueAcessor

UI to Model can be done like below

import {Output} from '@angular/core';

Use the event emitter

@Output() ngModelChange = new EventEmitter();

Whenever data gets changed emit the event

this.ngModelChange.emit(YOUR_NEW_VALUE);

Here is the detailed example

Using Tinymce editor as a directive

Is it possible to perform a two way binding on a custom directive with ngModel?

1 Answers1