mirror of
https://github.com/documenso/documenso.git
synced 2026-07-07 19:44:57 +10:00
David Nguyen
8b171c9a30
## Description Update docs to use the term "Editor" instead of "Authoring" to reduce confusion.
93 lines
2.0 KiB
Plaintext
93 lines
2.0 KiB
Plaintext
---
|
|
title: Angular
|
|
description: Embed Documenso signing in your Angular application using the official SDK.
|
|
---
|
|
|
|
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
|
|
|
|
## Installation
|
|
|
|
<Tabs items={['npm', 'yarn', 'pnpm']}>
|
|
<Tab value="npm">``` npm install @documenso/embed-angular ```</Tab>
|
|
<Tab value="yarn">``` yarn add @documenso/embed-angular ```</Tab>
|
|
<Tab value="pnpm">``` pnpm add @documenso/embed-angular ```</Tab>
|
|
</Tabs>
|
|
|
|
---
|
|
|
|
## Direct Template
|
|
|
|
```typescript
|
|
import { Component } from '@angular/core';
|
|
import { EmbedDirectTemplate } from '@documenso/embed-angular';
|
|
|
|
@Component({
|
|
selector: 'app-signing',
|
|
standalone: true,
|
|
imports: [EmbedDirectTemplate],
|
|
template: `
|
|
<embed-direct-template
|
|
[token]="token"
|
|
[name]="'John Doe'"
|
|
[email]="'john@example.com'"
|
|
[lockEmail]="true"
|
|
[externalId]="'order-12345'"
|
|
(documentReady)="onReady()"
|
|
(documentCompleted)="onCompleted($event)"
|
|
(documentError)="onError()"
|
|
/>
|
|
`,
|
|
})
|
|
export class SigningComponent {
|
|
token = 'your-template-token';
|
|
|
|
onReady() {
|
|
console.log('Ready');
|
|
}
|
|
|
|
onCompleted(data: { documentId: number }) {
|
|
console.log('Signed:', data.documentId);
|
|
}
|
|
|
|
onError() {
|
|
console.error('Error');
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Signing Token
|
|
|
|
```typescript
|
|
import { Component, Input } from '@angular/core';
|
|
import { EmbedSignDocument } from '@documenso/embed-angular';
|
|
|
|
@Component({
|
|
selector: 'app-signing',
|
|
standalone: true,
|
|
imports: [EmbedSignDocument],
|
|
template: `
|
|
<embed-sign-document
|
|
[token]="token"
|
|
(documentCompleted)="onCompleted($event)"
|
|
/>
|
|
`,
|
|
})
|
|
export class SigningComponent {
|
|
@Input() token = '';
|
|
|
|
onCompleted(data: { documentId: number }) {
|
|
console.log('Signed:', data.documentId);
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## See Also
|
|
|
|
- [Embedding Overview](/docs/developers/embedding) - Props reference and concepts
|
|
- [CSS Variables](/docs/developers/embedding/css-variables) - Customize appearance
|
|
- [Editor](/docs/developers/embedding/editor) - Embed document creation
|