How to use angular2-signaturepad - 3 common examples

'minWidth': this.component.settings.minWidth,
            'canvasWidth': this.setWidth,
            'canvasHeight': this.setHeight,
            'backgroundColor': this.component.settings.backgroundColor,
            'penColor': this.component.settings.penColor
        };
    };
    SignatureElement.prototype.ngAfterViewInit = function () {
        this.signaturePad.clear();
        if (this.component.data[this.component.settings.key] != null) {
            this.signaturePad.fromDataURL(this.component.data[this.component.settings.key]);
        }
    };
    __decorate([
        core_1.ViewChild(signature_pad_1.SignaturePad), 
        __metadata('design:type', signature_pad_1.SignaturePad)
    ], SignatureElement.prototype, "signaturePad", void 0);
    __decorate([
        core_1.ViewChild(AlignDirective), 
        __metadata('design:type', AlignDirective)
    ], SignatureElement.prototype, "alignDirective", void 0);
    return SignatureElement;
}(base_1.BaseElement));
exports.SignatureElement = SignatureElement;

this.signaturePadOptions = {
            'minWidth': this.component.settings.minWidth,
            'canvasWidth': this.setWidth,
            'canvasHeight': this.setHeight,
            'backgroundColor': this.component.settings.backgroundColor,
            'penColor': this.component.settings.penColor
        };
    };
    SignatureElement.prototype.ngAfterViewInit = function () {
        this.signaturePad.clear();
        if (this.component.data[this.component.settings.key] != null) {
            this.signaturePad.fromDataURL(this.component.data[this.component.settings.key]);
        }
    };
    __decorate([
        core_1.ViewChild(signature_pad_1.SignaturePad), 
        __metadata('design:type', signature_pad_1.SignaturePad)
    ], SignatureElement.prototype, "signaturePad", void 0);
    __decorate([
        core_1.ViewChild(AlignDirective), 
        __metadata('design:type', AlignDirective)
    ], SignatureElement.prototype, "alignDirective", void 0);
    return SignatureElement;
}(base_1.BaseElement));
exports.SignatureElement = SignatureElement;

phoneNumber: {
            component: {
                template: "<div class="\&quot;form-group">\n    <label class="\&quot;control-label\&quot;">{{ component.label }}</label>\n    <div>\n        <div class="\&quot;input-group-addon\&quot;">{{ component.settings.prefix }}</div>\n        <input class="\&quot;form-control\&quot;">\n        <div class="\&quot;input-group-addon\&quot;">{{ component.settings.suffix }}</div>\n    </div>\n</div>\n",
                styles: [requiredCSS]
            },
            module: {
                imports: [angular2_text_mask_1.TextMaskModule]
            }
        },
        signature: {
            component: {
                template: "<div class="\&quot;form-group">\n    <label class="\&quot;control-label\&quot;">{{ component.label }}</label>\n    <div align="" style="\&quot;display:" class="\&quot;input-group\&quot;">\n        <div>\n            <a class="\&quot;btn"><span class="\&quot;glyphicon"></span></a>\n            \n            <div class="\&quot;footer\&quot;">{{component.settings.footer}}</div>\n        </div>\n    </div>\n</div>\n",
                styles: ['.required .footer::after { content:" *"; color:red; }', ".clearButton {position:absolute; left: 0; top: 0; z-index: 1000}", ".footer {text-align: center; color:#C3C3C3;}"]
            },
            module: {
                imports: [angular2_signaturepad_1.SignaturePadModule],
                declarations: [signature_1.AlignDirective]
            }
        }
    }
};