Two way binding in Angular Color Picker component

import { Component, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { Browser } from '@syncfusion/ej2-base';

@Component({
    selector: 'app-root',
    templateUrl: 'app/template.html',
    styleUrls:['index.css']
})

export class AppComponent {
    private cValue: string = "#1de4d7";

    get value(): string {
        if (Browser.info.name === 'msie' && this.cValue.length > 7) {
            return this.cValue.substring(0, this.cValue.length - 2);
        } else {
            return this.cValue;
        }
    }

    @Input('value')
    set value(value: string) {
        this.cValue = value;
    }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ColorPickerModule } from '@syncfusion/ej2-angular-inputs';
import { FormsModule } from '@angular/forms';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ColorPickerModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

<div class="container">
	<form #colorPickerForm="ngForm">
		<div class="form-group">
			<label for="color">The selected color value is:</label>
			<br/>
			<div class="wrap">
				<input type="text" id="color" name="color" class="form-control" spellcheck="false" [(ngModel)]="value" required>
				<input ejs-colorpicker type="color" class="form-control" id="colorpicker" required [(value)]="value" name="colorpicker" />
			</div>
		</div>
	</form>
</div>