Skip to content

docs: update Angular integration examples for modern APIs#2781

Open
ArturQuirino wants to merge 1 commit intosuperdoc-dev:mainfrom
ArturQuirino:docs/angular-example-using-modern-angular
Open

docs: update Angular integration examples for modern APIs#2781
ArturQuirino wants to merge 1 commit intosuperdoc-dev:mainfrom
ArturQuirino:docs/angular-example-using-modern-angular

Conversation

@ArturQuirino
Copy link
Copy Markdown

Summary

Updates the Angular integration docs so examples follow current Angular patterns: signal-based viewChild / input() and teardown with inject(DestroyRef) instead of @ViewChild, @Input(), and ngOnDestroy.

What changed

  • Basic setupviewChild.required, AfterViewInit, and inject(DestroyRef).onDestroy() for superdoc.destroy(); SuperDoc is created in ngAfterViewInit so the template ref exists.
  • Full componentinput.required() / input() for inputs; same viewChild + DestroyRef pattern; document and user read via this.document() / this.user().
  • Handle file uploads — Restores full imports at the top of the snippet; same viewChild + DestroyRef cleanup; selector uses this.editorRef().nativeElement.

Why

Keeps the Getting Started Angular page aligned with modern Angular and copy-pasteable for recent projects.

Test plan

  • pnpm run check:imports
  • pnpm run dev:docs — verify Angular Integration page renders and snippets look correct

Copy link
Copy Markdown
Contributor

@caio-pizzol caio-pizzol left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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');
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
private readonly editorRef = viewChild.required<ElementRef>('editor');
private readonly editorRef = viewChild.required<ElementRef<HTMLDivElement>>('editor');

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants