diff --git a/apps/docs/getting-started/frameworks/angular.mdx b/apps/docs/getting-started/frameworks/angular.mdx
index 9facafb7ee..3395a0e6e7 100644
--- a/apps/docs/getting-started/frameworks/angular.mdx
+++ b/apps/docs/getting-started/frameworks/angular.mdx
@@ -6,6 +6,8 @@ keywords: "angular docx editor, angular word component, superdoc angular, angula
SuperDoc works with Angular through direct DOM manipulation. No wrapper needed.
+Requires Angular 17.2+. `viewChild()` and `input()` are stable from Angular 19; developer preview before that. On older versions, use `@ViewChild`, `@Input`, and `ngOnDestroy` in place of `inject(DestroyRef)`.
+
## Install
```bash
@@ -15,7 +17,7 @@ npm install superdoc
## Basic setup
```typescript
-import { Component, ElementRef, ViewChild, OnInit, OnDestroy } from '@angular/core';
+import { Component, ElementRef, viewChild, AfterViewInit, inject, DestroyRef } from '@angular/core';
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';
@@ -23,21 +25,21 @@ import 'superdoc/style.css';
selector: 'app-editor',
template: `
`,
})
-export class EditorComponent implements OnInit, OnDestroy {
- @ViewChild('editor', { static: true }) editorRef!: ElementRef;
+export class EditorComponent implements AfterViewInit {
+ private readonly editorRef = viewChild.required>('editor');
private superdoc: SuperDoc | null = null;
- ngOnInit() {
+ constructor() {
+ inject(DestroyRef).onDestroy(() => this.superdoc?.destroy());
+ }
+
+ ngAfterViewInit() {
this.superdoc = new SuperDoc({
- selector: this.editorRef.nativeElement,
+ selector: this.editorRef().nativeElement,
document: 'contract.docx',
documentMode: 'editing',
});
}
-
- ngOnDestroy() {
- this.superdoc?.destroy();
- }
}
```
@@ -46,7 +48,7 @@ export class EditorComponent implements OnInit, OnDestroy {
A reusable editor component with mode switching and export:
```typescript
-import { Component, ElementRef, ViewChild, Input, OnInit, OnDestroy } from '@angular/core';
+import { Component, ElementRef, viewChild, input, AfterViewInit, inject, DestroyRef } from '@angular/core';
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';
@@ -62,27 +64,27 @@ import 'superdoc/style.css';
`,
})
-export class DocEditorComponent implements OnInit, OnDestroy {
- @ViewChild('editor', { static: true }) editorRef!: ElementRef;
- @Input() document!: File | string;
- @Input() user?: { name: string; email: string };
+export class DocEditorComponent implements AfterViewInit {
+ private readonly editorRef = viewChild.required>('editor');
+ readonly document = input.required();
+ readonly user = input<{ name: string; email: string }>();
private superdoc: SuperDoc | null = null;
- ngOnInit() {
+ constructor() {
+ inject(DestroyRef).onDestroy(() => this.superdoc?.destroy());
+ }
+
+ ngAfterViewInit() {
this.superdoc = new SuperDoc({
- selector: this.editorRef.nativeElement,
- document: this.document,
+ selector: this.editorRef().nativeElement,
+ document: this.document(),
documentMode: 'editing',
- user: this.user,
- onReady: () => console.log('Editor ready'),
+ user: this.user(),
+ onReady: () => console.log('Editor ready!'),
});
}
- ngOnDestroy() {
- this.superdoc?.destroy();
- }
-
setMode(mode: 'editing' | 'viewing' | 'suggesting') {
this.superdoc?.setDocumentMode(mode);
}
@@ -96,6 +98,10 @@ export class DocEditorComponent implements OnInit, OnDestroy {
## Handle file uploads
```typescript
+import { Component, ElementRef, viewChild, inject, DestroyRef } from '@angular/core';
+import { SuperDoc } from 'superdoc';
+import 'superdoc/style.css';
+
@Component({
selector: 'app-upload-editor',
template: `
@@ -103,25 +109,25 @@ export class DocEditorComponent implements OnInit, OnDestroy {
`,
})
-export class UploadEditorComponent implements OnDestroy {
- @ViewChild('editor', { static: true }) editorRef!: ElementRef;
+export class UploadEditorComponent {
+ private readonly editorRef = viewChild.required>('editor');
private superdoc: SuperDoc | null = null;
+ constructor() {
+ inject(DestroyRef).onDestroy(() => this.superdoc?.destroy());
+ }
+
onFileChange(event: Event) {
const file = (event.target as HTMLInputElement).files?.[0];
if (!file) return;
this.superdoc?.destroy();
this.superdoc = new SuperDoc({
- selector: this.editorRef.nativeElement,
+ selector: this.editorRef().nativeElement,
document: file,
documentMode: 'editing',
});
}
-
- ngOnDestroy() {
- this.superdoc?.destroy();
- }
}
```