This is Experimental Bite-Sized Category Test.

High Signal - Low Noise
Concise, impactful insights with minimal clutter.

What is Angular Query?

Short breakdown πŸ‘‡

Angular Query is used for syncing server data with client applications.

  • Without any unneeded abstractions.

Ideal for

  • grids
  • tables
  • listings
  • etc...

We have 2 packages to look at

  1. ngneat/query
  2. tanstack/angular-query-experimental

ngneat is unofficial adapter

TanStack one is official

  • developed by @Arnoud_dv @tan_stack
  • for now supports only Signals
  • RxJS support planned for the future

Both are using TanStack Query Core.

🟨 Core Concepts 🟨

1. Queries

  • Declaratively manage data fetching.
  • Letting Angular Query handle the timing and specifics of server communication.

2. Mutations

  • Handle data modification
  • Integrating queries for a consistent data management

🧹 Cache & Cleanup 🧹

1. Cache Management

  • Data maintenance and retrieval is handled by Query Client & Query Cache.

2. Query Keys

  • A system for identifying and managing data dependencies across components.

3. SWR

  • Ensures data freshness by smartly revalidating data behind the scenes without sacrificing performance.

πŸ’» Significant DX improvements πŸ’»

  • Reduced boilerplate Out of the box
  • Intelligent caching and data management strategies
  • Giant performance boost in writing async code
  • Pairs fantastic with component state management libraries

Basic usage with ngneat/query:

Service usage:

import { injectQuery } from '@ngneat/query';

@Injectable({ providedIn: 'root' })
export class TodosService {
  #http = inject(HttpClient);
  #query = injectQuery();

  getTodos() {
    return this.#query({
      queryKey: ['todos'] as const,
      queryFn: () => {
        return this.http.get(

Component usage with Observables:

  standalone: true,
  template: `
    @if (todos.result$ | async; as result) {
      @if (result.isLoading) {
      @if (result.isSuccess) {
         {{[0].title }}
      @if (result.isError) {
export class TodosPageComponent {
  todos = inject(TodosService).getTodos();

Component usage with Signals:

  standalone: true,
  template: `
    @if (todos().isLoading) {
    @if (todos().data; as data) {
        {{ data[0].title }}
    @if (todos().isError) {
export class TodosPageComponent {
  todos = inject(TodosService).getTodos().result;

Make sure to let me know if you would like to see more materials in this short form.

Comment or thumbs up/down on e-mail :)

  • ngneat/query:
GitHub - ngneat/query: πŸš€ Powerful asynchronous state management, server-state utilities and data fetching for Angular Applications
πŸš€ Powerful asynchronous state management, server-state utilities and data fetching for Angular Applications - GitHub - ngneat/query: πŸš€ Powerful asynchronous state management, server-state utilities…
  • TanStack Angular Query:
Overview | TanStack Query Docs
VERY IMPORTANT: This library is currently in an experimental stage. This means that breaking changes will happen in minor AND patch releases. Use at your own risk. If you choose to rely on this in production in an experimental stage, please lock your version to a patch-level version to avoid unexpected breakages. The @tanstack/angular-query-experimental package offers a 1st-class API for using TanStack Query via Angular.

Tagged in:


Last Update: February 03, 2024