How to fix “Cannot read property 'toDataURL' of undefined” in ngx-signaturepad

Question

I'm using ngx-signaturepad with Angular 9. The drawing part works great but in drawComplete() I'm getting this error "Cannot read property 'toDataURL' of undefined" because this.signaturePad is null and I have no idea how to fix it. Any ideas would be greatly appreciated.

  import { Component, AfterViewInit, ViewChild } from '@angular/core';
  import { SignaturePad } from 'ngx-signaturepad/signature-pad';

  @Component({
    selector: 'ci-signature',
    template: '<signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"></signature-pad>'
  })

  // Uses: https://www.npmjs.com/package/ngx-signaturepad
  export class SignatureComponent implements AfterViewInit {
    @ViewChild(SignaturePad, { static: false }) signaturePad: SignaturePad;

    public signaturePadOptions: Object = { // passed through to szimek/signature_pad constructor
      'minWidth': 5,
      'canvasWidth': 500,
      'canvasHeight': 300
    };

    ngAfterViewInit() {
      // this.signaturePad is now available

      this.signaturePad.set('minWidth', 5); // set szimek/signature_pad options at runtime
      this.signaturePad.clear(); // invoke functions from szimek/signature_pad API
    }

    drawComplete() {
      // will be notified of szimek/signature_pad's onEnd event
      console.log(this.signaturePad.toDataURL());
    }

    drawStart() {
      // will be notified of szimek/signature_pad's onBegin event
      console.log('begin drawing');
    }

  }

Answer 1

This was answered by @yurzui, thanks Yurzui!

Here's the working code

  import { Component, AfterViewInit, ViewChild } from '@angular/core';
  import { SignaturePad } from 'ngx-signaturepad';

  @Component({
    selector: 'ci-signature',
    template: '<signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"></signature-pad>'
  })

  // Uses: https://www.npmjs.com/package/ngx-signaturepad
  export class SignatureComponent implements AfterViewInit {
    @ViewChild(SignaturePad, { static: true }) signaturePad: SignaturePad;

    public signaturePadOptions: Object = { // passed through to szimek/signature_pad constructor
      'minWidth': 5,
      'canvasWidth': 500,
      'canvasHeight': 300
    };

    ngAfterViewInit() {
      // this.signaturePad is now available

      this.signaturePad.set('minWidth', 5); // set szimek/signature_pad options at runtime
      this.signaturePad.clear(); // invoke functions from szimek/signature_pad API
    }

    drawComplete() {
      // will be notified of szimek/signature_pad's onEnd event
      console.log(this.signaturePad.toDataURL());
    }

    drawStart() {
      // will be notified of szimek/signature_pad's onBegin event
      console.log('begin drawing');
    }

  }