Signature Drawpad using Ionic not working

Question

I'm working on a native mobile app with Angular and ionic, I'm trying to add a signature zone on a page, but I've got somes errors

I added this package : angular2-signaturepad

I'm following this tutorial : https://devdactic.com/signature-drawpad-ionic-2/

Html content :

<div class="title">Please draw your Signature</div>
    <ion-row [ngClass]="{'drawing-active': isDrawing}">
      <ion-col></ion-col>
      <ion-col>
        <signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"></signature-pad>
      </ion-col>
      <ion-col></ion-col>

    </ion-row>
    <button ion-button full color="danger" (click)="clearPad()">Clear</button>
    <button ion-button full color="secondary" (click)="savePad()">Save</button>

    <ion-row>
      <ion-col></ion-col>
      <ion-col width-80>
        <img [src]="signature"/>
      </ion-col>
      <ion-col></ion-col>
    </ion-row>

page.ts content :

signature = '';
isDrawing = false;

import { SignaturePad } from 'angular2-signaturepad/signature-pad';
@ViewChild(SignaturePad) signaturePad: SignaturePad;
  private signaturePadOptions: Object = {
    minWidth: 2,
    canvasWidth: 400,
    canvasHeight: 200,
    backgroundColor: '#f6fbff',
    penColor: '#666a73'
  };

ionViewDidEnter() {
    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();
  }

  clearPad() {
    this.signaturePad.clear();
  }

I've also got an error on this line on my editor :

<signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"></signature-pad>

error : '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.

Answer 1

In your module

import { NgModule ,CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';<-----add

@NgModule({
  imports: [

    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes),
    TranslateModule,

  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],<-------add
  declarations: [IntroPage]
})
export class yourpage {}