NgxSignGen

This library is an Angular-based wrapper class for text-signature.

This library was generated with Angular CLI version 10.2.3.

Installation

Using npm:

$ npm i ngx-sign-gen

Usage

Import NgxSignGenModule into your app.module.ts file as follows:

// Other imports
import { NgxSignGenModule } from 'ngx-sign-gen';

@NgModule({
imports: [
// ...
NgxSignGenModule
],
providers: [],
})
export class AppModule { }

Available Options

Option	Required?	Description
[signGenSrc]	true	The text variable that you want to convert into a signature
[signGenConfig]	true	The configuration to use to generate the signature image
(signGenImg)	true	An event handler to capture the signature image generated

Usage

You can use the options listed above as follows:

In your component file app.component.ts:

export class AppComponent {
// ...
img: string = '';
username: string = '';

config: any = {
width: 500,
height: 150,
paddingX: 50,
paddingY: 80,
font: ["50px", "'Homemade Apple'"],
color: "black",
customFont: {
name: "'Homemade Apple'",
url: "http://fonts.googleapis.com/css?family=Homemade+Apple"
}
};

getImage(data) {
this.img = data;
}
}

In your html file app.component.html:

<img class="img-fluid bd rounded" style="height: 5rem; width: 100%; border: 1px solid lightgray;" alt="Signature" [src]="img">
<input type="text" [(ngModel)]="username" [signGenSrc]="username" [signGenConfig]="config" (signGenImg)="getImage($event)">

Output