# Document Viewer for Angular: SignatureSettings Explained > Learn how to use the SignatureSettings in the Document Viewer for Angular. This article explains how to load a document using JavaScript and how to set up the viewer for digital signatures. - **Author:** Bjoern Meyer - **Published:** 2024-03-20 - **Modified:** 2025-11-16 - **Description:** Learn how to use the SignatureSettings in the Document Viewer for Angular. This article explains how to load a document using JavaScript and how to set up the viewer for digital signatures. - **3 min read** (510 words) - **Tags:** - Angular - E-Sign - JavaScript - Document Viewer - **LLMs.txt URL:** https://www.textcontrol.com/blog/2024/03/20/signaturesettings-explained/llms.txt - **LLMs-full.txt URL:** https://www.textcontrol.com/blog/2024/03/20/signaturesettings-explained/llms-full.txt - **Canonical URL:** https://www.textcontrol.com/blog/2024/03/20/signaturesettings-explained/ --- When using the Document Viewer to collect signatures from users, the *SignatureSettings* property must be set. ``` ``` #### SignatureSettings Object The following table lists the used *SignatureSettings* in the above MVC Html helper code. | Setting | Value Type | Value description | |---|---|---| | showSignatureBar | boolean | Specifies whether to show the blue signature bar on opening the document. | | ownerName | string | The name of the signature requester that is displayed in the signature bar. | | signerName | string | The name of the signer that is displayed in the "Setup your Signature" dialog. | | signerInitials | string | The initials of the signer that is displayed in the "Setup your Signature" dialog. | | uniqueId | string | A unique ID that is included in the graphical representation of the electronic signature. | | redirectUrlAfterSignature | string | An Url that provides an endpoint to accept the signed document and signature data. | | signatureBoxes | SignatureBox\[\] | An array of *SignatureBoxes* to define which signature fields should be used based on the given name. Additionally, the style of the signature box can be provided. | | defaultSignatureFont | SignatureFontSettings | A *SignatureFontSettings* object that defines the used font in the signature soft pad. | #### SignatureFontSettings Object | Property | Value Type | Description | |---|---|---| | family | string | Specifies the font family of the signature. | #### SignatureBox Object | Property | Value Type | Description | |---|---|---| | name | string | Specifies the name of the signature box. | | signingRequired | boolean | Specifies whether the signing is required. | | style | SignatureBoxStyle | Specifies how the box is styled. | #### SignatureBoxStyle Enumeration | Value | |---| | SignatureBoxStyle.Signature | | SignatureBoxStyle.Initials | #### Activate Signature Fields In this example, signature fields named *txsign* are enabled as signature fields and are required to submit the document. ``` { showSignatureBar: true, ownerName: 'Paul', signerName: 'Jacob', defaultSignatureFont: 'Pacifico', signatureBoxes: [ { name: 'txsign', signingRequired: true, style: 0 } ] } ``` ### Loading Documents using JavaScript In Angular applications, the document is typically loaded via JavaScript, not statically via the component settings. When loading documents using JavaScript, the *SignatureSettings* object must be set in the *loadDocument* method. ``` var signatureSettings = { showSignatureBar: true, redirectUrlAfterSignature: 'https://yourbackend.com/document/sign', ownerName: 'Paul', signerName: 'Jacob', signerInitials: 'PK', signatureBoxes: [ { name: 'txsign', signingRequired: true, style: 0 } ] }; TXDocumentViewer.loadDocument(this.documentData.document, this.documentData.name, signatureSettings); ``` When the document is loaded, the signature fields are displayed in the document. The user can click on the signature field to sign the document. ![Signature Fields in Angular](https://s1-www.textcontrol.com/assets/dist/blog/2024/03/20/b/assets/results1.webp "Signature Fields in Angular") > **Learn More** > > Learn how to add electronic and digital signatures to PDFs in ASP.NET Core C# and Angular. This tutorial shows how to create an Angular application with an ASP.NET Core backend that uses the Document Viewer to display and sign PDF documents. > > [How to Add Electronic and Digital Signatures to PDFs in ASP.NET Core C# and Angular ](https://www.textcontrol.com/blog/2024/03/20/how-to-add-electronic-and-digital-signatures-to-pdfs-in-asp-net-core-c-sharp-and-angular/llms-full.txt) ### Conclusion The *SignatureSettings* object is used to define the signature settings in the Document Viewer for Angular. The object defines the signature fields, the signer, and the signature style. The signature fields are displayed in the document and can be signed by the user. The signed document can be submitted to a server endpoint for further processing. --- ## About Bjoern Meyer As CEO, Bjoern is the visionary behind our strategic direction and business development, bridging the gap between our customers and engineering teams. His deep passion for coding and web technologies drives the creation of innovative products. If you're at a tech conference, be sure to stop by our booth - you'll most likely meet Bjoern in person. With an advanced graduate degree (Dipl. Inf.) in Computer Science, specializing in AI, from the University of Bremen, Bjoern brings significant expertise to his role. In his spare time, Bjoern enjoys running, paragliding, mountain biking, and playing the piano. - [LinkedIn](https://www.linkedin.com/in/bjoernmeyer/) - [X](https://x.com/txbjoern) - [GitHub](https://github.com/bjoerntx) --- ## Series - [MailMerge with Angular and ASP.NET Core](https://www.textcontrol.com/blog/2024/03/15/mailmerge-with-angular-and-asp-net-core/llms.txt) - [How to Add Electronic and Digital Signatures to PDFs in ASP.NET Core C# and Angular](https://www.textcontrol.com/blog/2024/03/20/how-to-add-electronic-and-digital-signatures-to-pdfs-in-asp-net-core-c-sharp-and-angular/llms.txt) - **Document Viewer for Angular: SignatureSettings Explained** (this article) - [Asynchronous Loading and Saving in Angular Document Editor with an ASP.NET Core Web API](https://www.textcontrol.com/blog/2024/03/21/asynchronous-loading-and-saving-in-angular-document-editor-with-an-asp-net-core-web-api/llms.txt) - [Preparing Forms for the Document Viewer and Customizing the Signing Process in Angular and ASP.NET Core](https://www.textcontrol.com/blog/2024/03/25/preparing-forms-for-the-document-viewer-and-customizing-the-signing-process-in-angular-and-asp-net-core/llms.txt) - [Handling Form Field Data in Angular Applications](https://www.textcontrol.com/blog/2024/03/27/handling-form-field-data-in-angular-applications/llms.txt) --- ## Related Posts - [Getting Started: Document Viewer Version 33.0 with Angular CLI 19.0](https://www.textcontrol.com/blog/2025/03/18/getting-started-document-viewer-version-33-0-with-angular-cli-19-0/llms.txt) - [Getting Started: Document Viewer with Angular CLI v18.0](https://www.textcontrol.com/blog/2024/11/15/getting-started-document-viewer-with-angular-cli-v18-0/llms.txt) - [How to Add Electronic and Digital Signatures to PDFs in ASP.NET Core C# and Angular](https://www.textcontrol.com/blog/2024/03/20/how-to-add-electronic-and-digital-signatures-to-pdfs-in-asp-net-core-c-sharp-and-angular/llms.txt) - [Building an ASP.NET Core Backend Application to Host the Document Editor and Document Viewer](https://www.textcontrol.com/blog/2024/03/14/building-an-asp-net-core-backend-application-to-host-the-document-editor-and-document-viewer/llms.txt) - [Getting Started: Document Viewer with Angular CLI](https://www.textcontrol.com/blog/2023/02/02/getting-started-document-viewer-with-angular-cli/llms.txt) - [Building an ASP.NET Core Backend (Linux and Windows) for the Document Editor and Viewer](https://www.textcontrol.com/blog/2025/03/26/building-an-asp-net-core-backend-for-the-document-editor-and-viewer/llms.txt) - [Getting Started: Document Editor Version 33.0 with Angular CLI 19.0](https://www.textcontrol.com/blog/2025/03/18/getting-started-document-editor-version-33-0-with-angular-cli-19-0/llms.txt) - [Preparing Documents for E-Signing for Multiple Signers in .NET C#](https://www.textcontrol.com/blog/2024/11/13/preparing-documents-for-e-signing-for-multiple-signers-in-net-c-sharp/llms.txt) - [Optimizing Digital Signature Workflows: Starting with MS Word DOCX Files Instead of PDFs in C#](https://www.textcontrol.com/blog/2024/09/27/optimizing-digital-signature-workflows-starting-with-ms-word-docx-files-instead-of-pdfs-in-csharp/llms.txt) - [Using the Document Editor in SPA Applications using the removeFromDom Method](https://www.textcontrol.com/blog/2024/09/02/using-the-document-editor-in-spa-applications-using-the-removefromdom-method/llms.txt) - [Stay Up-To-Date: Document Viewer 32.3.1 Released](https://www.textcontrol.com/blog/2024/08/08/stay-up-to-date-document-viewer-32-3-1-released/llms.txt) - [Getting Started Video Tutorial: How to use the Document Viewer in Angular](https://www.textcontrol.com/blog/2024/08/05/getting-started-video-tutorial-how-to-use-the-document-viewer-in-angular/llms.txt) - [Observe When the Reporting Preview Tab is Active Using MutationObserver](https://www.textcontrol.com/blog/2024/07/23/observe-when-the-reporting-preview-tab-is-active-using-mutationobserver/llms.txt) - [Handling Form Field Data in Angular Applications](https://www.textcontrol.com/blog/2024/03/27/handling-form-field-data-in-angular-applications/llms.txt) - [Preparing Forms for the Document Viewer and Customizing the Signing Process in Angular and ASP.NET Core](https://www.textcontrol.com/blog/2024/03/25/preparing-forms-for-the-document-viewer-and-customizing-the-signing-process-in-angular-and-asp-net-core/llms.txt) - [Asynchronous Loading and Saving in Angular Document Editor with an ASP.NET Core Web API](https://www.textcontrol.com/blog/2024/03/21/asynchronous-loading-and-saving-in-angular-document-editor-with-an-asp-net-core-web-api/llms.txt) - [Document Viewer 32.2.1 Released](https://www.textcontrol.com/blog/2024/03/13/document-viewer-3221-released/llms.txt) - [Customizing Electronic Signature Fonts for Typed Signatures in Angular and ASP.NET Core](https://www.textcontrol.com/blog/2024/03/11/customizing-electronic-signature-fonts-for-typed-signatures-in-angular-and-asp-net-core/llms.txt) - [Document Viewer 32.1.1 Released: Signature Typing Support](https://www.textcontrol.com/blog/2023/12/21/document-viewer-3211-released-signature-typing-support/llms.txt) - [Getting Started: Document Editor with Angular CLI v17.0](https://www.textcontrol.com/blog/2023/12/13/getting-started-document-editor-with-angular-cli-17/llms.txt) - [Document Viewer 32.0.2 Released: Performance, Raw Signature Data, Text Selection](https://www.textcontrol.com/blog/2023/10/19/document-viewer-3202-released-performance-raw-signature-data-text-selection/llms.txt) - [Getting Started: Document Viewer with JavaScript](https://www.textcontrol.com/blog/2023/09/15/getting-started-document-viewer-with-javascript/llms.txt) - [Angular: Loading Documents from Assets Folder on Initialization](https://www.textcontrol.com/blog/2023/07/10/angular-loading-documents-from-assets-folder-on-initialization/llms.txt) - [Reuse Angular Document Editor Instances in Bootstrap Tabs](https://www.textcontrol.com/blog/2023/05/22/reuse-angular-document-editor-instances-in-bootstrap-tabs/llms.txt) - [Preview: PDF.js Support for Form Fields, Selections and Annotations](https://www.textcontrol.com/blog/2023/04/18/preview-pdfjs-support-for-form-fields-selections-and-annotations/llms.txt)