E-Signature <smart-esignature>

1 NPM Install

The Angular modules are in the smart-industrial package:

npm install smart-industrial

2 Register styles

The stylesheets go into the styles of the build options in angular.json, next to the existing entries:

"styles": [
	"node_modules/smart-industrial/source/styles/smart.default.css",
	"node_modules/smart-industrial/source/styles/smart.industrial-elements.css",
	"node_modules/smart-industrial/source/styles/smart.industrial.css"
]

smart.default.css is the base theme and smart.industrial-elements.css styles the Industrial components. smart.industrial.css is the Industrial theme, which applies to components with theme="industrial". For theme="industrial-dark", the package also has smart.industrial-dark.css.

3 Import the Angular module

The application imports ESignatureModule from the component's entry point. ESignatureComponent reaches a template through this module. A standalone component that lists ESignatureComponent itself in its imports does not compile (NG2011).

import { ESignatureModule } from 'smart-industrial/angular/esignature';

Each component has an entry point of its own, and an application imports from those. The entry point with all the components, smart-industrial/angular, puts every component into the bundle. In a production build of the Faceplate sample, the main bundle is 274 kB with FaceplateModule and 8.9 MB with SmartIndustrialModule.

4 Root component (standalone)

The sample has three files: the component, its template in step 5, and src/main.ts. They replace the files of the same name that the CLI generated.

src/app/app.ts

import { Component } from '@angular/core';
import { ESignatureModule } from 'smart-industrial/angular/esignature';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ESignatureModule],
  templateUrl: './app.html'
})
export class App {
  // Raised when the signer submits.
  onSignRequest(event: CustomEvent): void {
    const { userId, password, meaning } = event.detail;
    // The component waits. The application carries out the request here.
    console.log('signRequest', userId, password, meaning);
  }
}

src/main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { App } from './app/app';

bootstrapApplication(App).catch((err) => console.error(err));

A project from Angular CLI 20 or later already has these files. Its src/main.ts also passes an appConfig, which can stay. An older project names its root component AppComponent, in app.component.ts, and the sample does not use it.

5 Template (standalone)

src/app/app.html holds the markup. Strings are plain attributes. Numbers and booleans are property bindings, such as [requireReason]="true", so that they reach the component with their type and strictTemplates checks them. Each event of the component is an output named after it, such as (onSignRequest), and $event is the CustomEvent.

<smart-esignature
  theme="industrial"
  [requireReason]="true"
  [autoClose]="0"
  (onSignRequest)="onSignRequest($event)"
></smart-esignature>

6 NgModule application

An NgModule application uses the same package and styles. Its module lists ESignatureModule in imports and declares the component that uses the template from step 5. src/main.ts starts the module with bootstrapModule. This works on Angular 13 and later. From Angular 19, a component declared in a module needs standalone: false.