npm i @o.krucheniuk/ngx-signature-pad
app.module.ts
|
1 2 3 4 5 6 7 8 9 10 11 |
import { NgModule } from "@angular/core"; import { BrowserModule } from "@angular/platform-browser"; import { AppComponent } from "./app.component"; import { NgxSignaturePadModule } from "@o.krucheniuk/ngx-signature-pad"; @NgModule({ imports: [BrowserModule, NgxSignaturePadModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule {} |
app.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
import { Component, ViewChild } from "@angular/core"; import { NgxSignaturePadComponent, SignaturePadOptions } from "@o.krucheniuk/ngx-signature-pad"; @Component({ selector: "my-app", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent { @ViewChild("testPad", { static: true }) signaturePadElement: NgxSignaturePadComponent; config: SignaturePadOptions = { minWidth: 1, maxWidth: 10, penColor: "blue" }; public clear() { this.signaturePadElement.clear(); } public getImage() { console.log(this.signaturePadElement.toDataURL()); } public changeConfig() { this.config.penColor = Math.random() >= 0.5 ? "black" : "red"; this.config.maxWidth = Math.random() * 10; this.config = Object.assign({}, this.config); } public isInValid(): boolean { return !(this.signaturePadElement && !this.signaturePadElement.isEmpty()); } public forceReload() { this.signaturePadElement.forceUpdate(); } } |
app.component.html
|
1 2 3 4 5 6 7 8 |
<div class="container"> <ngx-signature-pad [config]="config" #testPad></ngx-signature-pad> </div> <button (click)="clear()">clear</button> <button (click)="getImage()" [disabled]="isInValid()">get image</button> <button (click)="changeConfig()">change config</button> <button (click)="forceReload()">forceReload</button> |
FULL SOURCE CODE
