Error signature pad undefined is not an object Ionic


I’ve used angular2-signaturepad. I have this error :
“undefined is not an object (evaluating ‘this.signaturePad.toDataUrl’)”

With this code :

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {SignaturePad} from 'angular2-signaturepad/signature-pad';

  selector: 'page-envoie',
  templateUrl: 'envoie.html'
export class EnvoiePage {
  public signaturePad : SignaturePad;

  public signaturePadOptions : Object = {
    'minWidth': 2,
    'canvasWidth': 340,
    'canvasHeight': 200
  public signatureImage : string;

  constructor(public navCtrl: NavController) {


   drawComplete() {
    this.signatureImage = this.signaturePad.toDataURL();
    this.navCtrl.push(EnvoiePage, {signatureImage: this.signatureImage});

  drawClear() {


    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>

<ion-content padding>
  <h3>Rapport d'intervention</h3>

  <signature-pad [options]="signaturePadOptions"  id="signatureCanvas"></signature-pad>
    <ion-col col-4>
<button ion-button full color="danger" (click)="drawCancel()">Cancel</button>
    <ion-col col-4>
<button ion-button full color="light" (click)="drawClear()">Clear</button>
    <ion-col col-4>
<button ion-button full color="secondary" (click)="drawComplete()">Done</button>

<div><img [src]="signatureImage" *ngIf="signatureImage" /></div>


Can you help me? I don’t know what’s wrong

You need to inject SignaturePad into your class, so move signaturePad : SignaturePad into your constructor.

1 Like

Ohhh my bad ! Thank you, now I have another error… “Uncaught (in promise): No provider for SignaturePad…”

Add it in your app module’s providers.

1 Like

Already done

providers: [ StatusBar, SplashScreen, SignaturePadModule, {provide: ErrorHandler, useClass: IonicErrorHandler} ]

Generally, modules go in imports, while classes go in providers.