docs: update Angular integration examples for modern APIs#2781
docs: update Angular integration examples for modern APIs#2781ArturQuirino wants to merge 1 commit intosuperdoc-dev:mainfrom
Conversation
…ut and viewChild signals
caio-pizzol
left a comment
There was a problem hiding this comment.
@ArturQuirino nice cleanup — the code is correct and consistent across all three snippets, and snippet 3 quietly fixes a missing-imports bug from the old version.
one ask: these examples need Angular 17.1+ (signal-based viewChild() and input() shipped in 17.1). the old examples worked on much older versions. anyone on older Angular who copy-pastes will get errors they won't understand. worth adding a one-liner under the intro on line 7? something like:
Examples use signal-based APIs (
viewChild(),input()) introduced in Angular 17.1. For older Angular versions, swap to the decorator-based equivalents (@ViewChild,@Input).
also left a small nit inline on typing the element ref.
| export class EditorComponent implements OnInit, OnDestroy { | ||
| @ViewChild('editor', { static: true }) editorRef!: ElementRef; | ||
| export class EditorComponent implements AfterViewInit { | ||
| private readonly editorRef = viewChild.required<ElementRef>('editor'); |
There was a problem hiding this comment.
small nit (applies to all three snippets): typing ElementRef<HTMLDivElement> gives nativeElement a real type instead of any. since the template is a <div>, it's a free win.
| private readonly editorRef = viewChild.required<ElementRef>('editor'); | |
| private readonly editorRef = viewChild.required<ElementRef<HTMLDivElement>>('editor'); |
Summary
Updates the Angular integration docs so examples follow current Angular patterns: signal-based
viewChild/input()and teardown withinject(DestroyRef)instead of@ViewChild,@Input(), andngOnDestroy.What changed
viewChild.required,AfterViewInit, andinject(DestroyRef).onDestroy()forsuperdoc.destroy(); SuperDoc is created inngAfterViewInitso the template ref exists.input.required()/input()for inputs; sameviewChild+DestroyRefpattern; document and user read viathis.document()/this.user().viewChild+DestroyRefcleanup; selector usesthis.editorRef().nativeElement.Why
Keeps the Getting Started Angular page aligned with modern Angular and copy-pasteable for recent projects.
Test plan
pnpm run check:importspnpm run dev:docs— verify Angular Integration page renders and snippets look correct