docs: update Angular integration examples for modern APIs#2781
docs: update Angular integration examples for modern APIs#2781ArturQuirino wants to merge 2 commits 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'); |
|
@caio-pizzol I added the text below so it makes it clearer for those using older versions of Angular what they need to change in the code to be able to use the code in this doc.
|
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