Skip to content

Update Angular integration guide to modern patterns (v20+)#1658

Draft
sequba wants to merge 1 commit intofeature/hf-122-framework-integration-guidesfrom
claude/review-angular-integration-JaDOF
Draft

Update Angular integration guide to modern patterns (v20+)#1658
sequba wants to merge 1 commit intofeature/hf-122-framework-integration-guidesfrom
claude/review-angular-integration-JaDOF

Conversation

@sequba
Copy link
Copy Markdown
Contributor

@sequba sequba commented Apr 20, 2026

Context

The Angular integration guide was using outdated patterns (NgModule, RxJS BehaviorSubject, async pipe, OnDestroy lifecycle hook). Angular 20+ has introduced new idiomatic approaches (standalone components, signals, @if/@for control flow, inject(), DestroyRef) that are now the recommended way to build Angular applications.

This update modernizes the documentation to reflect current Angular best practices while maintaining clarity for developers using the library.

Changes

  • Signals instead of RxJS: Replaced BehaviorSubject and Observable with Angular signals for simpler state management and automatic change detection
  • Modern component syntax: Updated examples to use standalone components with @Component decorator and inject() for dependency injection
  • Control flow syntax: Replaced *ngIf and *ngFor with @if and @for built-in control flow
  • Cleanup pattern: Replaced implements OnDestroy / ngOnDestroy() with inject(DestroyRef).onDestroy() callback pattern
  • OnPush change detection: Added ChangeDetectionStrategy.OnPush to the component example for better performance
  • Clarified scope: Updated provider scope explanation to reflect modern terminology
  • Added context note: Included a tip at the end noting that the linked Stackblitz demo uses older patterns and directing readers to prefer the updated snippets for new projects
  • RxJS bridge note: Added guidance for projects that still use RxJS streams, explaining how to use toSignal() at component boundaries

How did you test your changes?

Documentation review only. The code snippets provided are syntactically correct Angular 20+ code following official Angular patterns and best practices.

Types of changes

  • Change to the documentation

Checklist:

  • I have reviewed the guidelines about Contributing to HyperFormula and I confirm that my code follows the code style of this project.
  • My changes require a documentation update.

https://claude.ai/code/session_01KG37ikpGHrkUUgcGKUotnW

Rewrites the guide to follow current Angular idioms: standalone
components (default since v19), signals instead of BehaviorSubject +
async pipe, @if / @for control flow (replaces deprecated *ngIf / *ngFor
from v20), inject() over constructor DI, DestroyRef.onDestroy() over
ngOnDestroy, and explicit ChangeDetectionStrategy.OnPush. Drops the
AppModule / CommonModule references that no longer apply to new
projects.
@codecov
Copy link
Copy Markdown

codecov Bot commented Apr 20, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.18%. Comparing base (d6a316c) to head (33703c4).

Additional details and impacted files

Impacted file tree graph

@@                             Coverage Diff                              @@
##           feature/hf-122-framework-integration-guides    #1658   +/-   ##
============================================================================
  Coverage                                        97.18%   97.18%           
============================================================================
  Files                                              174      174           
  Lines                                            15086    15086           
  Branches                                          3223     3223           
============================================================================
  Hits                                             14662    14662           
  Misses                                             424      424           
🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 20, 2026

Performance comparison of head (33703c4) vs base (d6a316c)

                                     testName |   base |   head | change
------------------------------------------------------------------------
                                      Sheet A | 499.12 | 496.76 | -0.47%
                                      Sheet B | 159.47 | 160.53 | +0.66%
                                      Sheet T |  142.7 | 141.31 | -0.97%
                                Column ranges | 472.42 | 471.66 | -0.16%
Sheet A:  change value, add/remove row/column |  15.78 |  15.85 | +0.44%
 Sheet B: change value, add/remove row/column | 135.16 | 130.14 | -3.71%
                   Column ranges - add column | 149.86 | 147.32 | -1.69%
                Column ranges - without batch | 469.94 | 444.72 | -5.37%
                        Column ranges - batch | 119.67 |  116.1 | -2.98%

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants