Callable property on custom element?

I’m creating a custom element that wraps the SignaturePad library.

The library exposes an isEmpty() method. However, when I add my custom element into a dialog (to allow a user to sign their name in the dialog), I want to be able to check if a signature has been entered or not. I wanted to do this by calling the isEmpty() method, but that is embedded in the custom element so its not (AFAIK) available to the dialog.

Is there a way to expose this method through my custom element so that I can call it from my dialog?


import SignaturePad from 'signature_pad'

export class SignatureInputCustomElement{
    sp: SignaturePad;
    sCanvas : HTMLCanvasElement;

           this.sp = new SignaturePad(this.sCanvas);

      .. //resizes the canvas appropriately


export class CustomDialog(){

        //Need to check here if signature was added (!SignatureInput.sp.isEmpty())
        let sigExists = ??
1 Like

If you have <signature-input view-model.ref="mySignatureInput"></signature-input> in your custom-dialog.html, you should be able to call let sigExists = this.mySignatureInput.sp.isEmpty(); in your custom-dialog.ts.

1 Like

Correct me if I’m wrong, but doesn’t ref= only give me access to the HTMLElement not to its associated ViewModel?

I did try this just to be sure and I don’t appear to have access to the ViewModel.

1 Like

I’m guessing khuongduybui meant view-model.ref, which should work fine for this.

However, perhaps you could try to intercept signature pad’s events onBegin() and/or onEnd() in your custom element, check isEmpty() there and assign the result to your own isEmpty property which you can decorate with @bindable?
That way you don’t need the viewmodel ref, and you can just bind to the property in your view using the custom element

1 Like

Thanks. I had started looking at onBegin() and onEnd() to see if I could work something out that way. However, I realized I also needed a way to get the image to send to the server using toDataURL(). (Could probably do something similar to what you mentioned with isEmpty()) But view-model.ref worked great – so thanks for that!


Will you please publish the custom element when you have a chance? (Gist is just fine)

1 Like

Just keep in mind that you introduce a tight coupling in this case. You might want to think about an Event aggregator to loosen the coupling if that makes sense in your usecase


I’ve created one here – just sample code of what I came up with.