Getting Started

20 Jul 20173 minutes to read

The Angular Signature simplifies creation of a signature capture in a browser, allowing a user to draw a signature using mouse or touch.

This section explains briefly about how to create a Signature component in your application with Angular by the following step-by-step instructions. The following screenshot demonstrates the functionality of Signature component.

Create an Signature component in Angular

Create a new HTML file and include the below code:

HTML

<!DOCTYPE html>
    <html>
    <head>
        <link href="//cdn.syncfusion.com/25.1.35/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
        <script src="node_modules/core-js/client/shim.min.js"></script>
        <script src="node_modules/zone.js/dist/zone.js"></script>
        <script src="node_modules/reflect-metadata/Reflect.js"></script>
        <script src="node_modules/systemjs/dist/system.src.js"></script>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js" type="text/javascript"></script>
        <script src="http://cdn.syncfusion.com/25.1.35/js/web/ej.web.all.min.js" type="text/javascript"></script>
        <script src="http://cdn.syncfusion.com/25.1.35/js/common/ej.angular2.min.js"></script>
        <script src="systemjs.config.js">
        </script>
    </head>
    <body>
        <ej-app>Loading...</ej-app>
    </body>

Create div element and add in the body tag as below.

HTML

<div style="width:300px;height:600px;">

<ej-signature > </ej-signature>
        </div>

To render the Angular Signature use the below code.

import { Component } from '@angular/core';

@Component({
    selector: 'sd-home',
    templateUrl: 'app/signature.component.html'
})
export class SignatureComponent {

    constructor() {
    }
}

Run the above code to render the following output.

Adjusting Signature Size

You can customize the width and height of the Signature by width and height properties. These properties completely depend on signature canvas. The width and height are adjusted within the signature canvas.

The following code example is used to render the Signature component with customized width and height.

Add the following HTML to render signature with customized width and height.

HTML

<ej-signature [height]="height" [width]=”width">
    </ej-signature>

Add the following script to render signature with customized width and height.

import { Component } from '@angular/core';

@Component({
    selector: 'sd-home',
    templateUrl: 'app/signature.component.html'
})
export class SignatureComponent {
    constructor() {
        this.width = 200;
        this.height = 300;

    }
}

The following screenshot illustrates signature with customized width and height.