Ionic 4 SignaturePad Problem

Ionic Framework
1

SignaturePad is not working in ionic 4.
Error: Uncaught (in promise): 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.

i have already declare in AppModule but it didn’t work.

2

i m also getting same problem pls help us

3

SignaturePad is not working in ionic 4.
Error: Uncaught (in promise): 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.

i have resolve this error… ionic 4 angular 7

1.app.module.ts

import { SignaturePage } from ‘./signature/signature.page’;

import { IonicStorageModule } from ‘@ionic/storage’;
import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { RouteReuseStrategy } from ‘@angular/router’;

import { IonicModule, IonicRouteStrategy} from ‘@ionic/angular’;
import { SplashScreen } from ‘@ionic-native/splash-screen/ngx’;
import { StatusBar } from ‘@ionic-native/status-bar/ngx’;

import { AppComponent } from ‘./app.component’;
import { AppRoutingModule } from ‘./app-routing.module’;
import { SignaturePadModule } from ‘angular2-signaturepad’;

@NgModule({
declarations: [AppComponent, SignaturePage ],
entryComponents: [SignaturePage],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, IonicStorageModule.forRoot(), SignaturePadModule ,
],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}

2.app-routing.module.ts

import { NgModule } from ‘@angular/core’;
import { PreloadAllModules, RouterModule, Routes } from ‘@angular/router’;

const routes: Routes = [
{ path: ‘’, redirectTo: ‘home’, pathMatch: ‘full’ },
{ path: ‘home’, loadChildren: ‘./home/home.module#HomePageModule’ },
{ path: ‘signature’, loadChildren: ‘./signature/signature.module#SignaturePageModule’ },
];

@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule { }

3.home.page.
html


Home

Welcome to Signature!

Open Signature

4.home.page.ts
import { Component } from ‘@angular/core’;
import { NavController, ModalController } from ‘@ionic/angular’;
import {SignaturePage} from ‘…/signature/signature.page’;
import { async } from ‘rxjs/internal/scheduler/async’;

@Component({
selector: ‘app-home’,
templateUrl: ‘home.page.html’,
styleUrls: [‘home.page.scss’],
})
export class HomePage {
public signatureImage: any;

constructor(public navCtrl: NavController, public modalController: ModalController) {
// this.signatureImage = navParams.get(‘signatureImage’);
}

openSignatureModel() {
setTimeout(async () => {
const modal = await this.modalController.create({component: SignaturePage});
return await modal.present();
}, 300);

}
}

5.signature.module.ts

import { SignaturePadModule } from ‘angular2-signaturepad’;
import { NgModule } from ‘@angular/core’;
import { CommonModule } from ‘@angular/common’;
import { FormsModule } from ‘@angular/forms’;
import { Routes, RouterModule } from ‘@angular/router’;

import { IonicModule } from ‘@ionic/angular’;

import { SignaturePage } from ‘./signature.page’;

const routes: Routes = [
{
path: ‘’,
component: SignaturePage
}
];

@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes),
SignaturePadModule
],
declarations: [SignaturePage],
exports: [SignaturePage]
})
export class SignaturePageModule {}

6.signature.page.html

Signature Cancel Clear Accept

7.signature.page.ts
import { Component, ViewChild, OnInit } from ‘@angular/core’;
import { NavController, ToastController, ModalController} from ‘@ionic/angular’;
// tslint:disable-next-line:import-spacing
// import {SignaturePadModule} from ‘angular2-signaturepad’;
import {SignaturePad} from ‘angular2-signaturepad/signature-pad’;
import { Storage } from ‘@ionic/storage’;

@Component({
selector: ‘app-signature’,
templateUrl: ‘./signature.page.html’,
styleUrls: [’./signature.page.scss’],
})
export class SignaturePage implements OnInit {
signature = ‘’;
@ViewChild(SignaturePad) public signaturePad: SignaturePad;

// tslint:disable-next-line:ban-types
public signaturePadOptions: Object = {
minWidth: 2,
canvasWidth: 570,
canvasHeight: 200,
backgroundColor: ‘#f6fbff’,
penColor: ‘#666a73’

};

constructor(public navCtrl: NavController, public storage: Storage, public toastController: ToastController,
public modalController: ModalController) {
}
ngOnInit() {

}

async save() {
// this.navCtrl.navigateBack(’/home’);
const data = this.signaturePad.toDataURL(‘image/png’);
this.storage.set(‘savedSignature’, data);
console.log(data);
// this.signaturePad.clear();
const toast = await this.toastController.create({
message: ‘New Signature saved.’,
duration: 3000
});
toast.present();
}
clear() {
this.signaturePad.clear();
}
cancel() {
this.modalController.dismiss();
}
}

:smile:thank you!