angular-db

name	angular-db
description	Angular bindings for TanStack DB. injectLiveQuery inject function with Angular signals (Signal<T>) for all return values. Reactive params pattern ({ params: () => T, query: ({ params, q }) => QueryBuilder }) for dynamic queries. Must be called in injection context. Angular 17+ control flow (@if, @for) and signal inputs supported. Import from @tanstack/angular-db (re-exports all of @tanstack/db).
type	framework
library	db
framework	angular
library_version	0.6.17
requires	["db-core"]
sources	["TanStack/db:docs/framework/angular/overview.md","TanStack/db:packages/angular-db/src/index.ts"]

This skill builds on db-core. Read it first for collection setup, query builder, and mutation patterns.

TanStack DB — Angular

Setup

import { Component } from '@angular/core'
import { injectLiveQuery, eq, not } from '@tanstack/angular-db'

@Component({
  selector: 'app-todo-list',
  standalone: true,
  template: `
    @if (query.isLoading()) {
      <div>Loading...</div>
    } @else {
      <ul>
        @for (todo of query.data(); track todo.id) {
          <li>{{ todo.text }}</li>
        }
      </ul>
    }
  `,
})
export class TodoListComponent {
  query = injectLiveQuery((q) =>
    q
      .from({ todos: todosCollection })
      .where(({ todos }) => not(todos.completed))
      .orderBy(({ todos }) => todos.created_at, 'asc'),
  )
}

@tanstack/angular-db re-exports everything from @tanstack/db.

Inject Function

injectLiveQuery

Returns an object with Angular Signal<T> properties — call with () in templates:

// Static query — no reactive dependencies
const query = injectLiveQuery((q) => q.({ : todoCollection }))








 query = ({
  :  ({ : .() }),
  : 
    q
      .({ : todoCollection })
      .( (todo., params.)),
})


 query = ({
  :  q.({ : todoCollection }),
  : ,
})


 query = (preloadedCollection)


 query = ({
  :  ({ : .() }),
  :  {
     (!params.)  
     q
      .({ : todoCollection })
      .( (todo., params.))
  },
})