2 | @almothafar/angular-signature-pad demo 3 |
4 | 5 | 29 | -------------------------------------------------------------------------------- /projects/demo/src/app/app.component.scss: -------------------------------------------------------------------------------- 1 | $base-width: 850px; 2 | 3 | form { 4 | padding-top: 20px; 5 | margin: 0 auto; 6 | max-width: $base-width + 100; 7 | 8 | h3 { 9 | margin: 10px 5px 0; 10 | } 11 | 12 | button { 13 | margin: 5px; 14 | } 15 | } 16 | 17 | .sig-container { 18 | margin: 10px 0; 19 | border: dashed 1px black; 20 | max-width: $base-width; 21 | 22 | .row { 23 | display: flex; 24 | flex-direction: row; 25 | flex-wrap: nowrap; 26 | justify-content: space-between; 27 | align-items: center; 28 | 29 | .col { 30 | flex-basis: calc(50% - 40px); 31 | flex-grow: 1; 32 | flex-shrink: 1; 33 | padding: 0 10px; 34 | } 35 | } 36 | 37 | app-signature-field { 38 | margin: 0 auto; 39 | max-width: $base-width - 50; 40 | display: block; 41 | } 42 | } 43 | 44 | .sig-container-image { 45 | height: 400px; 46 | width: $base-width - 50; 47 | } 48 | -------------------------------------------------------------------------------- /projects/demo/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | 4 | describe('AppComponent', () => { 5 | beforeEach(async () => { 6 | await TestBed.configureTestingModule({ 7 | imports: [AppComponent], 8 | }).compileComponents(); 9 | }); 10 | 11 | it('should create the app', () => { 12 | const fixture = TestBed.createComponent(AppComponent); 13 | const app = fixture.componentInstance; 14 | expect(app).toBeTruthy(); 15 | }); 16 | 17 | it(`should have the 'demo' title`, () => { 18 | const fixture = TestBed.createComponent(AppComponent); 19 | const app = fixture.componentInstance; 20 | expect(app.title).toEqual('demo'); 21 | }); 22 | 23 | it('should render title', () => { 24 | const fixture = TestBed.createComponent(AppComponent); 25 | fixture.detectChanges(); 26 | const compiled = fixture.nativeElement as HTMLElement; 27 | expect(compiled.querySelector('h1')?.textContent).toContain('Hello, demo'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /projects/demo/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import {AfterViewInit, Component, ElementRef, QueryList, ViewChildren} from '@angular/core'; 2 | import {FormBuilder, FormGroup, Validators} from '@angular/forms'; 3 | import {SignatureFieldComponent, SignatureFieldConfig} from './signature-field/signature-field.component'; 4 | 5 | @Component({ 6 | selector: 'app-root', 7 | templateUrl: './app.component.html', 8 | styleUrl: './app.component.scss' 9 | }) 10 | export class AppComponent implements AfterViewInit { 11 | public items: SignatureFieldConfig[] = [ 12 | { 13 | options: {backgroundColor: 'rgb(255,255,255)'}, 14 | }, 15 | { 16 | options: {canvasBackground: 'rgb(255, 255, 255) url(assets/sign-here.png) bottom left no-repeat', penColor: 'rgb(255, 0, 0)'}, 17 | quality: 0.5, 18 | imageType: 'image/jpeg', 19 | }, 20 | { 21 | options: {canvasBackground: 'rgb(0, 0, 255) url(assets/sign-here.png) bottom left no-repeat', penColor: 'rgb(255, 255, 0)'}, 22 | quality: 0.8, 23 | imageType: 'image/jpeg', 24 | }, 25 | { 26 | options: {canvasBackground: 'url(assets/sign-here.png) bottom left no-repeat, center / cover url(assets/cat-sig.png)', canvasHeight: 400} 27 | } 28 | ]; 29 | public titles: string[] = [ 30 | 'Default with white background', 31 | 'Image Background & Red Pen Color (JPEG/Quality 50%)', 32 | 'Image with Blue Background & Red Pen Color (JPEG/Quality 80%)', 33 | 'With image as background' 34 | ]; 35 | 36 | public form: FormGroup; 37 | public result: string[] = []; 38 | 39 | @ViewChildren(SignatureFieldComponent) public sigs: QueryList
2 | @if (signature) {
3 | ![Signature]()
4 | } @else {
5 | No signature data to preview
6 | }
7 |
8 |
--------------------------------------------------------------------------------
/projects/demo/src/app/signature-view/signature-view.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 |
4 | .preview {
5 | background: #e7e6e6;
6 | }
7 |
8 | img {
9 | display: block;
10 | margin: 0 auto;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/projects/demo/src/app/signature-view/signature-view.component.ts:
--------------------------------------------------------------------------------
1 | import {AfterViewInit, Component, ElementRef, forwardRef, Input, ViewChild} from '@angular/core';
2 | import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
3 | import {SignaturePadComponent} from 'angular-signature-pad';
4 | import {NgSignaturePadOptions} from "projects/angular-signature-pad/src/lib/angular-signature-pad.component";
5 |
6 |
7 | @Component({
8 | selector: 'app-signature-view',
9 | templateUrl: 'signature-view.component.html',
10 | styleUrl: 'signature-view.component.scss'
11 | })
12 | export class SignatureViewComponent {
13 | @Input() signature: string;
14 |
15 | public nativeElement: HTMLElement;
16 |
17 | constructor(private _elementRef: ElementRef) {
18 | this.nativeElement = this._elementRef.nativeElement;
19 | }
20 |
21 | }
22 |
--------------------------------------------------------------------------------
/projects/demo/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/projects/demo/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: false
3 | };
4 |
--------------------------------------------------------------------------------
/projects/demo/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |