Angular wrapper for @phuong-tran-redoc/document-engine-core
npm install @phuong-tran-redoc/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.
---
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.
- 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
---
> ⚠️ This is a private package. Please contact an authorized person to install it.
``bash`
npm install @phuong-tran-redoc/document-engine-angularor
pnpm add @phuong-tran-redoc/document-engine-angular
`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"
}
Add to your angular.json or import in your global styles:
`scss`
// styles.scss
@import '@phuong-tran-redoc/document-engine-angular/styles';
---
#### Standalone Component
`typescript
import { Component } from '@angular/core';
import { DocumentEditorComponent } from '@phuong-tran-redoc/document-engine-angular';
@Component({ Hello World!
selector: 'app-my-editor',
standalone: true,
imports: [DocumentEditorComponent],
template: ,
})
export class MyEditorComponent {
content = '
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 {}
`
#### 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:
,
})
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 textOutputs:
-
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 focusMethods:
-
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
@phuong-tran-redoc/document-engine-core`---
| Angular Version | Package Version |
| --------------- | --------------- |
| 17.x | 1.x |
| 18.x | 1.x |
---
Developed by Duc Phuong (Jack)
- 💼 LinkedIn
- 🐙 GitHub
- 📧 Email
---
MIT License
See LICENSE.md for full license text.