ColorPicker component supports two-way property binding.
The steps to perform two-way binding.
value
property as like the below code snippet.<input ejs-colorpicker type="color" class="form-control" id="colorpicker" required [(value)]="value" name="colorpicker" />
<input type="text" id="name" name="name" class="form-control" [(ngModel)]="value" />
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>
By default, the selected color value returns 8 digit hex code in
value
property. Some browser like IE won’t support the 8 digit hex code. In such case, you can use getter setter method to change the value to supported format as like the above sample.