Getting started with Angular Signature component

26 Feb 20266 minutes to read

This guide demonstrates how to set up and configure the Syncfusion Angular Signature component for capturing and managing digital signatures. The component provides smooth stroke rendering on a canvas, undo/redo operations, and export functionality for saving signatures in multiple formats.

Note: This guide supports Angular 21 and other recent Angular versions. For detailed compatibility with other Angular versions, please refer to the Angular version support matrix. Starting from Angular 19, standalone components are the default, and this guide reflects that architecture.

Ready to streamline your Syncfusion^® Angular development? Discover the full potential of Syncfusion^® Angular components with Syncfusion^® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion^® CodeStudio and more. Explore Syncfusion^® AI Coding Assistant

Prerequisites

Ensure your development environment meets the System Requirements for Syncfusion Angular UI Components.

Dependencies

The list of dependencies required to use the Signature module in your application is given below:

|-- @syncfusion/ej2-angular-inputs
    |-- @syncfusion/ej2-angular-base
    |-- @syncfusion/ej2-inputs
        |-- @syncfusion/ej2-base
        |-- @syncfusion/ej2-popups
        |-- @syncfusion/ej2-buttons
        |-- @syncfusion/ej2-splitbuttons

Set up the Angular application

The fastest way to start with Angular is to use the Angular CLI. Install Angular CLI globally with the following command:

npm install -g @angular/cli

Angular 21 Standalone Architecture: Standalone components are the default in Angular 21. This guide uses the modern standalone architecture. If you need more information about the standalone architecture, refer to the Standalone Guide.

Installing a specific version

To install a particular version of Angular CLI, use:

npm install -g @angular/[email protected]

Create a new application

With Angular CLI installed, execute the following command to generate a new application:

ng new syncfusion-angular-app

• This command prompts you to configure settings such as enabling Angular routing and selecting a stylesheet format.

? Which stylesheet format would you like to use? (Use arrow keys)
> CSS             [ https://developer.mozilla.org/docs/Web/CSS                     ]
  Sass (SCSS)     [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass (Indented) [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less            [ http://lesscss.org                                             ]

• By default, a CSS-based application is created. To use SCSS instead, run:

ng new syncfusion-angular-app --style=scss

• During project setup, configure Server-side rendering (SSR) if needed.

• Select an AI tool or choose ‘none’ if not needed.

• Navigate to your newly created application directory:

cd syncfusion-angular-app

Note: Angular 19 and below use app.component.ts, app.component.html, and app.component.css. Angular 20+ generates a simpler structure: src/app/app.ts, app.html, and app.css (without .component. suffixes).

Installing Syncfusion^® Signature Package

Syncfusion^®’s Angular component packages are available on npmjs.com. To use Syncfusion^® Angular components, install the necessary package.

This guide uses the Angular Signature component for demonstration. Install the package with:

ng add @syncfusion/ej2-angular-inputs

This command will perform the following configurations:

• Add the @syncfusion/ej2-angular-inputs package and peer dependencies to your package.json.
• Import the Signature component component in your application.
• Register the default Syncfusion^® material theme in angular.json.

For more details on version compatibility, refer to the Version Compatibility section.

Syncfusion^® provides two package distributions for Angular components:

1. Ivy library format (Angular package format) - Recommended
2. Angular compatibility compiler (ngcc) - Legacy compilation pipeline

Latest Syncfusion^® packages are Ivy-compatible and recommended for Angular 12+. Install using:

ng add @syncfusion/ej2-angular-inputs

For legacy projects using ngcc:

Note: ngcc packages are compatible with Angular CLI 15 and below but may generate deprecation warnings. Starting from Angular 16, ngcc support has been removed. Refer to the FAQ for more information.

npm add @syncfusion/[email protected]

Import Syncfusion CSS styles

Apply Syncfusion^® themes via CSS/SCSS from npm packages, CDN, CRG, or Theme Studio.

The Material theme is automatically added to styles.css when you run ng add.

To import only the styles required for the Signature component, add these imports:

@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css';

Important: Maintain the import order to respect component dependencies.

For SCSS styles, refer to this guide.

Adding Syncfusion^® Signature component

Modify the template in app.ts file with the Signature component to render the Signature component.

import { Component, OnInit } from '@angular/core';
import { SignatureModule } from '@syncfusion/ej2-angular-inputs';

@Component({
    imports: [SignatureModule],
    standalone: true,
    selector: 'app-root',
    template: `<!-- To Render Signature. -->
             <canvas ejs-signature #signature id="signature" ></canvas>`
})
export class AppComponent implements OnInit {
    ngOnInit(): void {
    }
}

Running the application

Run the application in the browser using the following command:

ng serve --open

The following example shows a basic Signature component.

app.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { SignatureModule } from '@syncfusion/ej2-angular-inputs'
import { enableRipple } from '@syncfusion/ej2-base'



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

@Component({
imports: [
        FormsModule,SignatureModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
                <h4>Sign here</h4>
            <!-- To Render Signature. -->
            <canvas ejs-signature #signature id="signature"></canvas></div>`
})
export class AppComponent {}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));