document-engine-angular

 !License

Angular wrapper for @phuong-tran-redoc/document-engine-core. This library provides Angular components, directives, and services to integrate the Document Engine into Angular applications.

---

🎯 Overview

document-engine-angular is a comprehensive Angular wrapper that makes it easy to use the Document Engine in Angular applications. It provides pre-built components, reactive state management, and Angular-specific utilities.

$3

- Angular Components: Ready-to-use component
- Reactive API: RxJS-based state management
- Template-Driven: Angular template syntax support
- Form Integration: Works with Angular Forms (ngModel, Reactive Forms)
- Accessibility: ARIA-compliant components
- Standalone Components: Works with standalone Angular components
- Type Safety: Full TypeScript support

---

📦 Installation

> ⚠️ This is a private package. Please contact an authorized person to install it.

``bash
npm install @phuong-tran-redoc/document-engine-angular


or


pnpm add @phuong-tran-redoc/document-engine-angular
`

$3

`json
{
"@angular/core": "^17.0.0 || ^18.0.0",
"@angular/common": "^17.0.0 || ^18.0.0",
"@phuong-tran-redoc/document-engine-core": "^1.0.0"
}
`

$3

Add to your angular.json or import in your global styles:

`scss
// styles.scss
@import '@phuong-tran-redoc/document-engine-angular/styles';
`

---

🚀 Quick Start

$3

#### Standalone Component

`typescript
import { Component } from '@angular/core';
import { DocumentEditorComponent } from '@phuong-tran-redoc/document-engine-angular';

@Component({
selector: 'app-my-editor',
standalone: true,
imports: [DocumentEditorComponent],
template: ,
})
export class MyEditorComponent {
content = '

Hello World!

';

onContentChange(newContent: string) {
console.log('Content changed:', newContent);
}
}
`

#### Module-Based

`typescript
import { NgModule } from '@angular/core';
import { DocumentEditorModule } from '@phuong-tran-redoc/document-engine-angular';

@NgModule({
imports: [DocumentEditorModule],
// ...
})
export class AppModule {}
`

$3

#### Template-Driven Forms

`typescript
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DocumentEditorComponent } from '@phuong-tran-redoc/document-engine-angular';

@Component({
selector: 'app-form-editor',
standalone: true,
imports: [FormsModule, DocumentEditorComponent],
template:

{{ documentContent }}

,
})
export class FormEditorComponent {
documentContent = '

Edit me!

';
}
`

#### Reactive Forms

`typescript
import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { DocumentEditorComponent } from '@phuong-tran-redoc/document-engine-angular';

@Component({
selector: 'app-reactive-editor',
standalone: true,
imports: [ReactiveFormsModule, DocumentEditorComponent],
template: ,
})
export class ReactiveEditorComponent {
editorControl = new FormControl('

Content

');
}
`

$3

`typescript
import { Component } from '@angular/core';
import { DocumentEditorComponent, EditorConfig } from '@phuong-tran-redoc/document-engine-angular';

@Component({
selector: 'app-advanced-editor',
standalone: true,
imports: [DocumentEditorComponent],
template:
[config]="editorConfig"
[readonly]="isReadonly"
[showToolbar]="true"
(ready)="onEditorReady($event)"
/>
,
})
export class AdvancedEditorComponent {
isReadonly = false;

editorConfig: EditorConfig = {
extensions: ['dynamic-fields', 'restricted-editing', 'tables'],
placeholder: 'Start typing...',
autoFocus: true,
};

onEditorReady(editor: Editor) {
console.log('Editor is ready!', editor);
}
}
`

---

🧩 Components

$3

The main editor component.

Inputs:

- content: string | JSONContent - Initial content (HTML or JSON)
- config: EditorConfig - Editor configuration
- readonly: boolean - Read-only mode
- showToolbar: boolean - Show/hide toolbar
- placeholder: string - Placeholder text

Outputs:

- contentChange: EventEmitter - Emits when content changes
- ready: EventEmitter - Emits when editor is ready
- focus: EventEmitter - Emits when editor gains focus
- blur: EventEmitter - Emits when editor loses focus

Methods:

- getContent(): string - Get current content as HTML
- getJSON(): JSONContent - Get current content as JSON
- setContent(content: string | JSONContent): void - Set editor content
- focus(): void - Focus the editor

$3

Customizable toolbar component.

`typescript

`

$3

UI for inserting dynamic fields.

`typescript
[fields]="availableFields"
(fieldSelect)="onFieldSelect($event)"
/>
`

---

📚 Services

$3

Service for managing editor instances.

`typescript
import { DocumentEditorService } from '@phuong-tran-redoc/document-engine-angular';

export class MyComponent {
constructor(private editorService: DocumentEditorService) {}

createEditor() {
const editor = this.editorService.create({
// configuration
});
}
}
`

$3

Service for managing dynamic fields.

`typescript
import { DynamicFieldService } from '@phuong-tran-redoc/document-engine-angular';

export class MyComponent {
constructor(private fieldService: DynamicFieldService) {}

replaceFields() {
this.fieldService.replaceFields({
customer_name: 'John Doe',
loan_amount: '50000',
});
}
}
`

---

🎨 Styling

$3

`scss
// Override CSS variables
:root {
--doc-editor-bg: #ffffff;
--doc-editor-text: #000000;
--doc-editor-border: #e0e0e0;
--doc-editor-focus: #007bff;
}
`

$3

`html

`

`scss
.my-custom-editor {
// Your custom styles
}
`

---

🔧 Development

$3

Build the library:

`bash
nx build document-engine-angular
`

$3

Run unit tests:

`bash
nx test document-engine-angular
`

$3

Lint the code:

`bash
nx lint document-engine-angular
`

---

📖 Documentation

- Live Demo - See the editor in action
- API Reference - Detailed API documentation
- Examples - Code examples and use cases
- Migration Guide - Migrating from other editors

---

🔗 Related Packages

- Core Library: @phuong-tran-redoc/document-engine-core`
- Demo Application: document-engine

---

🤝 Compatibility

| Angular Version | Package Version |
| --------------- | --------------- |
| 17.x | 1.x |
| 18.x | 1.x |

---

👤 Author

Developed by Duc Phuong (Jack)

- 💼 LinkedIn
- 🐙 GitHub
- 📧 Email

---

📄 License

MIT License

See LICENSE.md for full license text.