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

Issue

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

Solution

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

Answered By – Abhijith Nagaraja

Answer Checked By – Mary Flores (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.