feat(angular-db): add Angular injectLiveQuery helper with tests and example app #424

emcdaniel1624 · 2025-08-20T02:37:42Z

introduce injectLiveQuery for TanStack DB Angular integration
add unit tests (test-setup.ts, test-inject-query.ts)
include examples/angular/todos app demonstrating basic usage
docs: set up docs generation

- introduce injectLiveQuery for TanStack DB Angular integration - add unit tests (test-setup.ts, test-inject-query.ts) - include examples/angular/todos app demonstrating basic usage - docs: angular/adapter.md

changeset-bot · 2025-08-20T02:37:46Z

🦋 Changeset detected

Latest commit: ca42fdb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@tanstack/angular-db	Minor
todos	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

…r best practices - Remove deps parameter and manual dependency tracking logic from React useLiveQuery - Eliminate unnecessary signal wrappers (lastDeps, lastConfig, currentCollection) - Simplify collection creation without React-style effect dependency comparison - Use Angular signals idiomatically instead of computed wrappers - Maintain same functionality while following Angular reactivity patterns

Added an overload to use an angular/core resource style object for function parameters. If used any signals returned by the params function will rebuild the query collection. example: updated to show the new usage tests: refactored to include the new overload docs: included new usage

emcdaniel1624 · 2025-08-22T01:25:12Z

I think this is ready for review and some input. Would appreciate any feedback on the implementation and a lot more testing is probably needed. Happy to edit/add anything i missed.

Especially curious about how I handled reactive params. I opted for an overload that allows a user to pass an object similar to how the new resource api works in angular 19+

selectedProjectId = signal(2);

todoQuery = injectLiveQuery({
params: () => ({ projectID: this.selectedProjectId() }),
query: ({ params, q }) =>
q
.from({ todo: todosCollection })
.where(({ todo }) => eq(todo.completed, false))
.where(({ todo }) => eq(todo.projectID, params.projectID)),
});

this is different from how other adapters are handling this by using the deps array as an argument. Happy to refactor if this isn't what you all would want to see in terms of developer experience.

KyleAMathews · 2025-08-26T15:31:45Z

ChatGPT's review https://chatgpt.com/share/68add34d-fa48-800c-ae68-75f4fbce9455

KyleAMathews · 2025-09-11T16:06:35Z

@emcdaniel1624 thanks for doing this! I tested the app and it works great & ChatGPT's review says it's good 😆 I don't have any angular experience (nor anyone else on the core maintainers group) so I'm fine shipping this and assuming you and other Angular folks will come along to fix bugs & keep things going.

Did you read the ChatGPT review? A few of the minor things it mentioned could be worth doing e.g. clarify return types and adding a peerDependency (this is Angular 19+ only right?).

The injectLiveQuery implementation uses Angular's signals API (signal, computed, effect) which was introduced in Angular 16. The previous peer dependency of >=14.0.0 was incorrect as it would allow usage with Angular versions that don't support these APIs. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

… safety Export a reusable TypeScript interface for the injectLiveQuery return type to improve developer experience. The interface provides clear documentation of all available signals and their types, making it easier for developers to understand what properties are available on the returned object. This follows the pattern established by other TanStack adapters that export their result types. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

@for

- Add Angular example to live-queries.md showing injectLiveQuery usage with modern Angular template syntax (@for, signals) - Add Angular installation instructions to installation.md with compatibility note for v16.0.0+ - Include Angular in framework adapter documentation links alongside React and Vue This ensures Angular gets equal treatment with other framework adapters in the documentation. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

emcdaniel1624 · 2025-09-12T17:45:00Z

@emcdaniel1624 thanks for doing this! I tested the app and it works great & ChatGPT's review says it's good 😆 I don't have any angular experience (nor anyone else on the core maintainers group) so I'm fine shipping this and assuming you and other Angular folks will come along to fix bugs & keep things going.

Did you read the ChatGPT review? A few of the minor things it mentioned could be worth doing e.g. clarify return types and adding a peerDependency (this is Angular 19+ only right?).

No problem happy to continue working on this. I believe the peerDependency should be 17+. I will take a look at this over the weekend as well as the type clarifications.

emcdaniel1624 · 2025-09-12T17:47:16Z

@emcdaniel1624 thanks for doing this! I tested the app and it works great & ChatGPT's review says it's good 😆 I don't have any angular experience (nor anyone else on the core maintainers group) so I'm fine shipping this and assuming you and other Angular folks will come along to fix bugs & keep things going.
Did you read the ChatGPT review? A few of the minor things it mentioned could be worth doing e.g. clarify return types and adding a peerDependency (this is Angular 19+ only right?).

No problem happy to continue working on this. I believe the peerDependency should be 17+. I will take a look at this over the weekend as well as the type clarifications.

Ah I see you updated it to 16. This might be correct I will double check to make sure.

KyleAMathews · 2025-09-12T17:54:13Z

Ah I see you updated it to 16. This might be correct I will double check to make sure.

That's what Claude said 😆

I will take a look at this over the weekend as well as the type clarifications.

I also pushed something for the types & fiddled with the docs. I think things are ready to go so when you give m a 👍 I'll merge and release!

pkg-pr-new · 2025-09-12T18:01:08Z

More templates

@tanstack/angular-db

npm i https://pkg.pr.new/@tanstack/angular-db@424

@tanstack/db

npm i https://pkg.pr.new/@tanstack/db@424

@tanstack/db-ivm

npm i https://pkg.pr.new/@tanstack/db-ivm@424

@tanstack/electric-db-collection

npm i https://pkg.pr.new/@tanstack/electric-db-collection@424

@tanstack/query-db-collection

npm i https://pkg.pr.new/@tanstack/query-db-collection@424

@tanstack/react-db

npm i https://pkg.pr.new/@tanstack/react-db@424

@tanstack/rxdb-db-collection

npm i https://pkg.pr.new/@tanstack/rxdb-db-collection@424

@tanstack/solid-db

npm i https://pkg.pr.new/@tanstack/solid-db@424

@tanstack/svelte-db

npm i https://pkg.pr.new/@tanstack/svelte-db@424

@tanstack/trailbase-db-collection

npm i https://pkg.pr.new/@tanstack/trailbase-db-collection@424

@tanstack/vue-db

npm i https://pkg.pr.new/@tanstack/vue-db@424

commit: ca42fdb

Fixed two critical issues preventing Angular tests from running: 1. **Angular version mismatch**: @angular/platform-browser v20.3.0 was being pulled in as a peer dependency while using @angular/core v19.2.15, causing import errors for MAX_ANIMATION_TIMEOUT which only exists in Angular v20+. - Added explicit @angular/platform-browser and @angular/compiler v19 dependencies - Ensures all Angular packages use consistent v19 versions for better compatibility 2. **Import path typo**: Fixed incorrect import path from "../../db/tests/utls" to "../../db/tests/utils" in test file Tests now pass successfully: 15 tests passed with 96% coverage 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

emcdaniel1624 · 2025-09-12T18:48:29Z

Ah I see you updated it to 16. This might be correct I will double check to make sure.

That's what Claude said 😆

I will take a look at this over the weekend as well as the type clarifications.

I also pushed something for the types & fiddled with the docs. I think things are ready to go so when you give m a 👍 I'll merge and release!

Thanks for the help! Double checked and 16+ seems to be fine. Everything looks good to go to me 👍

KyleAMathews · 2025-09-12T18:50:18Z

Ok great, off it goes! Are you on social medias? I'll tweet it out when it's released and credit you (if you'd like).

emcdaniel1624 · 2025-09-12T19:02:04Z

Ok great, off it goes! Are you on social medias? I'll tweet it out when it's released and credit you (if you'd like).

Ah I appreciate it, but I just have a burner for viewing content and I don't post. Was considering starting a real account focused on software but haven't gotten around to it. I'll give you a follow when I do. You can link my GitHub if you'd like. Trying to get into more open-source work in the future so it should be more active than it has been in the past.

KyleAMathews · 2025-09-12T19:05:42Z

Great, I'll post a link to your GitHub. Thanks again!

emcdaniel1624 added 2 commits August 19, 2025 19:15

feat(db): add Angular injectLiveQuery helper with tests and example app

57b22a1

- introduce injectLiveQuery for TanStack DB Angular integration - add unit tests (test-setup.ts, test-inject-query.ts) - include examples/angular/todos app demonstrating basic usage - docs: angular/adapter.md

change angular author

e72b964

add changset and fix docs set up

8024542

emcdaniel1624 changed the title ~~feat(db): add Angular injectLiveQuery helper with tests and example app~~ feat(angular-db): add Angular injectLiveQuery helper with tests and example app Aug 21, 2025

emcdaniel1624 marked this pull request as ready for review August 21, 2025 00:11

emcdaniel1624 marked this pull request as draft August 21, 2025 04:33

emcdaniel1624 marked this pull request as ready for review August 22, 2025 01:25

emcdaniel1624 and others added 4 commits August 27, 2025 18:46

Fix formatting and tests

2974bf0

update readme

0e8fc8a

Merge remote-tracking branch 'origin/main' into feat(angular-db)

d45f96e

Still show completed todos

c3ef264

KyleAMathews and others added 4 commits September 12, 2025 11:27

Merge remote-tracking branch 'origin/main' into feat(angular-db)

cdbdbd2

prettier

a3a915d

fix type

bbfd9e5

KyleAMathews merged commit 84f0084 into TanStack:main Sep 12, 2025
6 checks passed

github-actions bot mentioned this pull request Sep 12, 2025

ci: Version Packages #546

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(angular-db): add Angular injectLiveQuery helper with tests and example app #424

feat(angular-db): add Angular injectLiveQuery helper with tests and example app #424

Uh oh!

emcdaniel1624 commented Aug 20, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Aug 20, 2025 •

edited

Loading

Uh oh!

emcdaniel1624 commented Aug 22, 2025

Uh oh!

KyleAMathews commented Aug 26, 2025

Uh oh!

KyleAMathews commented Sep 11, 2025

Uh oh!

emcdaniel1624 commented Sep 12, 2025

Uh oh!

emcdaniel1624 commented Sep 12, 2025

Uh oh!

KyleAMathews commented Sep 12, 2025

Uh oh!

pkg-pr-new bot commented Sep 12, 2025 •

edited

Loading

Uh oh!

emcdaniel1624 commented Sep 12, 2025

Uh oh!

Uh oh!

KyleAMathews commented Sep 12, 2025

Uh oh!

emcdaniel1624 commented Sep 12, 2025

Uh oh!

KyleAMathews commented Sep 12, 2025

Uh oh!

Uh oh!

feat(angular-db): add Angular injectLiveQuery helper with tests and example app #424

feat(angular-db): add Angular injectLiveQuery helper with tests and example app #424

Uh oh!

Conversation

emcdaniel1624 commented Aug 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented Aug 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

emcdaniel1624 commented Aug 22, 2025

Uh oh!

KyleAMathews commented Aug 26, 2025

Uh oh!

KyleAMathews commented Sep 11, 2025

Uh oh!

emcdaniel1624 commented Sep 12, 2025

Uh oh!

emcdaniel1624 commented Sep 12, 2025

Uh oh!

KyleAMathews commented Sep 12, 2025

Uh oh!

pkg-pr-new bot commented Sep 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

emcdaniel1624 commented Sep 12, 2025

Uh oh!

Uh oh!

KyleAMathews commented Sep 12, 2025

Uh oh!

emcdaniel1624 commented Sep 12, 2025

Uh oh!

KyleAMathews commented Sep 12, 2025

Uh oh!

Uh oh!

emcdaniel1624 commented Aug 20, 2025 •

edited

Loading

changeset-bot bot commented Aug 20, 2025 •

edited

Loading

pkg-pr-new bot commented Sep 12, 2025 •

edited

Loading