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(); - } } ```