Ionic signature-pad - ionic-framework

Question

I have install 'angular2-signaturepad' in my ionic project, and I created a test app and that's working fine, But when I try to integrate with my existing project shows me 'signature-pad' is not a known element' and '
<ion-content padding>
<signature-pad [ERROR ->][options]="signaturePadOptions"
(onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"></signatur"):
ng:///SignPageModule/SignPage.html#10:16
'signature-pad' is not a known element:
1. If 'signature-pad' is an Angular component, then verify that it is part of this module.
2. If 'signature-pad' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message. ("
<ion-content padding>
[ERROR ->]<signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplet"): ng:///SignPageModule/SignPage.html#10:1
Error: Template parse errors:
Can't bind to 'options' since it isn't a known property of 'signature-pad'.
1. If 'signature-pad' is an Angular component and it has 'options' input, then verify that it is part of this module.
2. If 'signature-pad' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '#NgModule.schemas' of this component
This is the error I m facing. I was added 'CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA' in my app.module.ts file.
This is my sign.html code:
<ion-header>
<ion-navbar>
<ion-title>sign</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-row [ngClass]="{'drawing-active': isDrawing}">
<ion-col></ion-col>
<ion-col style="border: 1px solid #5d6691;">
<signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()" style="width: 50px; height: 580px; color: red;"> </signature-pad>
</ion-col>
<ion-col></ion-col>
</ion-row>
<ion-row>
<ion-col>
<button ion-button style="color: #fff; background: #e59c9c;" (click)="clearPad()">Clear</button>
</ion-col>
<ion-col>
<button ion-button style="color: #fff; background: #4355a5;" (click)="savePad()">Save</button>
</ion-col>
<ion-col>
<button ion-button style="color: #fff; background: #e59c9c;" (click)="delPad()">delete</button>
</ion-col>
</ion-row>
<ion-row text-center>
<ion-col width-120>
<img [src]="signature" [hidden]= "signature == '' || signature == undefined " style="height: 200px;" />
</ion-col>
</ion-row>
This is my sign.ts code:
import { Component, ViewChild } from '#angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';
import { SignaturePad } from 'angular2-signaturepad/signature-pad';
import { Storage } from '#ionic/storage';
#IonicPage()
#Component({
selector: 'page-sign',
templateUrl: 'sign.html',
})
export class SignPage {
public signature = '';
isDrawing = false;
#ViewChild(SignaturePad) signaturePad: SignaturePad;
private signaturePadOptions: Object = {
'minWidth': 1,
'canvasWidth': 320,
'canvasHeight': 200,
'backgroundColor': '#f6fbff',
'penColor': '#06219b'
};
constructor(public navCtrl: NavController,
public navParams: NavParams,
public storage: Storage,
public toastCtrl: ToastController ) {
}
ionViewDidLoad() {
this.signaturePad.clear()
this.storage.get('savedSignature').then((data) => {
this.signature = data;
});
}
drawComplete() {
this.isDrawing = false;
}
drawStart() {
this.isDrawing = true;
}
savePad() {
this.signature = this.signaturePad.toDataURL();
this.storage.set('savedSignature', this.signature);
this.signaturePad.clear();
let toast = this.toastCtrl.create({
message: 'New Signature saved.',
cssClass: 'homeToast',
duration: 3000,
position: 'top'
});
toast.present();
}
clearPad() {
this.signaturePad.clear();
}
delPad(){
this.storage.clear();
this.signature = '';
}
}
This is my app.module.ts code:
import { BrowserModule } from '#angular/platform-browser';
import { ErrorHandler, NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '#angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '#ionic-native/splash-screen';
import { StatusBar } from '#ionic-native/status-bar';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { SignaturePadModule } from 'angular2-signaturepad';
import { IonicStorageModule } from '#ionic/storage';
#NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp,{
backButtonText: '',
autoFocusAssist: true }),
SignaturePadModule,
IonicStorageModule.forRoot()
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
],
schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA ]
})
export class AppModule {}
I expected signature-pad to be working fine

Answer 1

Make sure to also import the module in sign.module.ts
import { SignaturePadModule } from 'angular2-signaturepad';
#NgModule({
imports: [
...
SignaturePadModule
],
declarations: [SignPage]
})
export class SignPageModule {}