advice

[gerritwitkamp]

Hi! First of all; great job for developing this component. I need some advice for implementing this component in our project. I want to wrap the angular-signature-pad in a custom component, so we can switch to another 3rd party implementation easily when needed. This 3rd party component has a 'clear' method, which needs to be available from my custom component also. What's the best practice to achieve this? Something like below?

@Component({
    selector: 'app-signature-pad',
    template: `<signature-pad #signature [options]="signaturePadOptions"></signature-pad>`
})
export class WrappedSignaturePadComponent {
    @ViewChild('signature') 
    private signaturePad!: SignaturePadComponent;

    signaturePadOptions: NgSignaturePadOptions = {
        backgroundColor: "rgb(255,255,255)",
        canvasWidth: 500,
        canvasHeight: 300,
    };

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

// Using the wrapper
@Component({
    selector: 'app-foo',
    template: `<app-signature-pad #signature></app-signature-pad>`
})
export class FooComponent {
    @ViewChild('signature') 
    private signaturePad!: WrappedSignaturePadComponent;

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

[almothafar]

Hi, may you please check the demo project if that gives you some insight? https://github.com/almothafar/angular-signature-pad/tree/master/projects/demo