Skip to content

HF-238 - Review \"Integration with Angular\" guide and demo#1691

Merged
sequba merged 6 commits into
developfrom
HF-238_Review-Integration-with-Angular-guide-and-demo
Jun 9, 2026
Merged

HF-238 - Review \"Integration with Angular\" guide and demo#1691
sequba merged 6 commits into
developfrom
HF-238_Review-Integration-with-Angular-guide-and-demo

Conversation

@KrzysztofZie

@KrzysztofZie KrzysztofZie commented Jun 9, 2026

Copy link
Copy Markdown
Collaborator

Context

  • Added a modern Angular (v20+) section — an example in the same style as the demo: a service exposing a signal, a component using inject() + OnPush, a template with @if/@for, and bootstrap with provideZonelessChangeDetection.
  • Marked the old example as the older-versions variant (BehaviorSubject + async pipe), while fixing its compatibility: the component is now standalone with imports: [CommonModule], so it works without an NgModule.
  • Added a path for very old Angular (≤13) — an NgModule-based apps subsection at the end of the "older" section, completing the three tiers: modern → older/standalone → NgModule.
  • Moved the Demo section right under the modern Angular code (StackBlitz link, without describing the demo's internal standards).
  • Clarified the "Provider scope" and "Cleanup" notes to state they apply to both variants (they depend on DI scope, not on signals/RxJS).

In short: the guide was rewritten to show the modern pattern (matching the demo) while preserving backward compatibility, with a clear split by Angular version.

How did you test your changes?

Types of changes

  • Breaking change (a fix or a feature because of which an existing functionality doesn't work as expected anymore)
  • New feature or improvement (a non-breaking change that adds functionality)
  • Bug fix (a non-breaking change that fixes an issue)
  • Additional language file, or a change to an existing language file (translations)
  • Change to the documentation

Related issues:

  1. Fixes #...

Checklist:

  • I have reviewed the guidelines about Contributing to HyperFormula and I confirm that my code follows the code style of this project.
  • I have signed the Contributor License Agreement.
  • My change is compliant with the OpenDocument standard.
  • My change is compatible with Microsoft Excel.
  • My change is compatible with Google Sheets.
  • I described my changes in the CHANGELOG.md file.
  • My changes require a documentation update.
  • My changes require a migration guide.

Note

Low Risk
Documentation-only changes to the Angular integration guide; no runtime or library code affected.

Overview
Rewrites the Integration with Angular guide into a version-tiered layout: a new modern Angular (v20+) path (signals, inject(), OnPush, @if/@for, provideZonelessChangeDetection) and a preserved older path (BehaviorSubject + async pipe).

The legacy example is updated for standalone components (standalone: true, imports: [CommonModule]) and adds an NgModule-based subsection for Angular 13 and below. Sample sheet data in snippets changes from [1, 2, '=A1+B1'] to [1, 4, '=A1+B1']. Provider scope and Cleanup notes now state they apply to both signal and RxJS variants.

Reviewed by Cursor Bugbot for commit 210c1ac. Bugbot is set up for automated code reviews on this repo. Configure here.

sequba and others added 4 commits February 20, 2026 13:18
* Fix package-lock file

* Docs: remove CodeSandbox embedded demos and add links to working exa,ples in Stackblitz (#1621)
<!-- CURSOR_SUMMARY -->
> [!NOTE]
> **Low Risk**
> Low risk documentation-only changes: adds new guide pages and adjusts
VuePress sidebar navigation with no runtime or API impact.
> 
> **Overview**
> Adds three new AI-focused documentation pages: `ai-sdk`,
`integration-with-langchain`, and `mcp-server`, describing how to use
HyperFormula for deterministic spreadsheet computation in agent
workflows.
> 
> Updates the VuePress guide sidebar to surface these pages under
**Integrations**, renames the section from *Framework integration* to
*Integrations*, and moves the former *Overview* links into a new *About*
section.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
54c541b. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Co-authored-by: GreenFlux <support@greenflux.us>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
@netlify

netlify Bot commented Jun 9, 2026

Copy link
Copy Markdown

Deploy Preview for hyperformula-docs ready!

Name Link
🔨 Latest commit 7a36f99
🔍 Latest deploy log https://app.netlify.com/projects/hyperformula-docs/deploys/6a28035a1edc0e0008d4a5e2
😎 Deploy Preview https://deploy-preview-1691--hyperformula-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions

github-actions Bot commented Jun 9, 2026

Copy link
Copy Markdown

Performance comparison of head (210c1ac) vs base (79f2f15)

                                     testName |   base |   head | change
------------------------------------------------------------------------
                                      Sheet A |    521 | 503.05 | -3.45%
                                      Sheet B | 170.58 | 168.85 | -1.01%
                                      Sheet T | 149.29 | 150.72 | +0.96%
                                Column ranges | 488.01 | 483.89 | -0.84%
Sheet A:  change value, add/remove row/column |  16.93 |  18.16 | +7.27%
 Sheet B: change value, add/remove row/column |  144.2 | 155.84 | +8.07%
                   Column ranges - add column | 156.44 | 159.38 | +1.88%
                Column ranges - without batch | 463.91 | 473.54 | +2.08%
                        Column ranges - batch | 118.42 | 123.49 | +4.28%

```

Consume the service from a component and bind `values$ | async` in the template. Declare the component in your `AppModule` alongside `CommonModule`:
Consume the service from a component and bind `values$ | async` in the template. The component below is **standalone** (the default since Angular 17) and imports `CommonModule` directly, so it works without an `NgModule`. The structural directives `*ngIf` / `*ngFor` and the `async` pipe all come from `CommonModule`:

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.

I'd prefer the snippets here to use @for syntax instead of *ngFor (same as the Stackblitz demo). Let's make it look like modern Angular

@sequba sequba left a comment

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.

Please change PR base to develop

@sequba sequba changed the base branch from master to develop June 9, 2026 14:26
@sequba sequba merged commit d4195b5 into develop Jun 9, 2026
29 of 30 checks passed
@sequba sequba deleted the HF-238_Review-Integration-with-Angular-guide-and-demo branch June 9, 2026 14:30
@codecov

codecov Bot commented Jun 9, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.16%. Comparing base (79f2f15) to head (210c1ac).
⚠️ Report is 1 commits behind head on develop.

Additional details and impacted files

Impacted file tree graph

@@           Coverage Diff            @@
##           develop    #1691   +/-   ##
========================================
  Coverage    97.16%   97.16%           
========================================
  Files          176      176           
  Lines        15322    15322           
  Branches      3356     3356           
========================================
  Hits         14887    14887           
  Misses         427      427           
  Partials         8        8           
🚀 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.

@netlify

netlify Bot commented Jun 9, 2026

Copy link
Copy Markdown

Deploy Preview for hyperformula-dev-docs ready!

Name Link
🔨 Latest commit 210c1ac
🔍 Latest deploy log https://app.netlify.com/projects/hyperformula-dev-docs/deploys/6a2822d16c8ab6000776ef61
😎 Deploy Preview https://deploy-preview-1691--hyperformula-dev-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

GreenFlux added a commit that referenced this pull request Jun 9, 2026
Brings in one content-only commit that landed on develop:

- d4195b5 HF-238 - Review "Integration with Angular" guide and demo (#1691)

It touches `docs/guide/integration-with-angular.md`, which this PR
migrated to `docs/src/content/docs/guide/integration-with-angular.md`.
Git's rename detection auto-applied the develop-side edits to the new
location — no conflicts.

Pushes the merge so GitHub's `mergeable: CONFLICTING` flag recomputes.
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.

3 participants