import { Component , ViewChild , forwardRef } from '@angular/core' ; import { NG_VALUE_ACCESSOR , ControlValueAccessor } from '@angular/forms' ; import { SignaturePad } from 'angular2-signaturepad/signature-pad' ; @ Component ( { selector : 'signature-field' , templateUrl : 'signature-field.component.html' , providers : [ { provide : NG_VALUE_ACCESSOR , useExisting : forwardRef ( ( ) => SignatureFieldComponent ) , multi : true , } , ] , } ) export class SignatureFieldComponent implements ControlValueAccessor { @ ViewChild ( SignaturePad ) public signaturePad : SignaturePad ; public options : Object = { } ; public _signature : any = null ; public propagateChange : Function = null ; get signature ( ) : any { return this . _signature ; } set signature ( value ) { this . _signature = value ; console . log ( 'set signature to ' + this . _signature ) ; console . log ( 'signature data :' ) ; console . log ( this . signaturePad . toData ( ) ) ; this . propagateChange ( this . signature ) ; } public writeValue ( value ) { if ( ! value ) { return ; } this . _signature = value ; this . signaturePad . fromDataURL ( this . signature ) ; } public registerOnChange ( fn ) { this . propagateChange = fn ; } public registerOnTouched ( ) { } public ngAfterViewInit ( ) { this . signaturePad . clear ( ) ; } public drawBegin ( ) { console . log ( 'Begin Drawing' ) ; } public drawComplete ( ) { this . signature = this . signaturePad . toDataURL ( 'image/jpeg' , 0.5 ) ; } public clear ( ) { this . signaturePad . clear ( ) ; this . signature = '' ; } }