Your next Angular Query Builder ๐Ÿ

June 12, 2026 ยท View on GitHub

Your next Angular Query Builder ๐Ÿ

CI codecov npm version License: MIT

NgQubee is a query builder for Angular. Compose your API requests without re-inventing the wheel.

  • Reactive โ€” URIs emitted as RxJS observables, state held in Angular Signals
  • Pagination ready โ€” typed PaginatedCollection, fluent navigation (nextPage, lastPage, goToPage)
  • Test-driven โ€” 980+ specs
  • Multi-driver support: API Platform (Symfony), Directus, Django REST Framework, FeathersJS, JSON:API, json-server, Laravel (pagination-only), Spatie Query Builder, NestJS (nestjs-paginate), @nestjsx/crud, OData, Payload CMS, PocketBase, PostgREST / Supabase, Sieve (.NET), Spring Data REST, Strapi, and WordPress REST

๐Ÿ“š Documentation

Full documentation lives at ng-qubee.andreatantimonaco.me โ€” driver guides, query-builder API, pagination helpers, auto-generated API reference, and version history.

This README is intentionally minimal. For everything beyond install + a five-line example, head to the docs site.

Requirements

  • Angular โ‰ฅ 16 (uses Signals)
  • RxJS ^6.5.0 || ^7.0.0

Install

npm i ng-qubee

Drivers

A driver must be specified in the configuration:

DriverBackendWire format snapshot
API PlatformAPI Platform for PHP/Symfonyfield=value, price[between]=10..50, order[field]=desc, page=N&itemsPerPage=N
DirectusDirectus headless CMS / data platformfilter[field][_eq]=value, sort=-field, fields=col,rel.col, limit=N&page=N
DRFDjango REST Framework + django-filterfield=value, field__gte=N, ordering=-field, page=N&page_size=M
FeathersFeathersJS database adaptersfield=value, field[$gte]=N, $sort[field]=-1, $select[0]=col, $limit=N&$skip=M
JSON:APIAny JSON:API-compliant backendfilter[field]=value, sort=-field, page[number]=N&page[size]=N
json-serverjson-server mock REST APIfield=value, field:gt=N, _sort=-field, q=term, _page=N&_per_page=N
LaravelPlain Laravel paginationlimit=N&page=N (pagination only)
SpatieSpatie Laravel Query Builderfilter[field]=value, sort=-field
NestJSnestjs-paginatefilter.field=$op:value, sortBy=field:DESC
@nestjsx/crud@nestjsx/crud for NestJSfilter=field||$eq||value, sort=field,ASC, join=relation, page=N&limit=N
ODataOData v4 (ASP.NET Core OData, SAP, Microsoft Graph)$filter=field eq 'value', $orderby=field desc, $expand=rel($select=col), $top=N&$skip=M
PayloadPayload CMS / mongoose-paginate-v2 backendswhere[field][equals]=value, sort=-field, select[col]=true, page=N&limit=M
PocketBasePocketBase single-binary backendfilter=(field='value' && other>10), sort=-field, expand=rel, fields=col, page=N&perPage=M
PostgRESTPostgREST / Supabasecol=eq.value, order=col.asc, select=col,rel(*), limit=N&offset=M
SieveSieve for ASP.NET Corefilters=Field==Value,Other>=N, sorts=-field, page=N&pageSize=N
SpringSpring Data REST (HAL)sort=field,asc (repeatable), page=N&size=N (0-indexed page)
StrapiStrapi v4 / v5 headless CMSfilters[field][$eq]=value, sort[0]=field:asc, pagination[page]=N&pagination[pageSize]=N
WordPressWordPress REST APIfield=value, orderby=field&order=desc, _fields=col, _embed=rel, search=term, page=N&per_page=M

Per-driver guides โ€” wire format, supported operators, response parsing, customisation โ€” live on the docs site.

Quick start

import { bootstrapApplication } from '@angular/platform-browser';
import { DriverEnum, NgQubeeService, provideNgQubee, SortEnum } from 'ng-qubee';

bootstrapApplication(AppComponent, {
  providers: [provideNgQubee({ driver: DriverEnum.STRAPI })]
});

// In a component or service:
constructor(private _qb: NgQubeeService) {}

this._qb
  .setResource('articles')
  .addFilter('status', 'published')
  .addSort('createdAt', SortEnum.DESC)
  .setLimit(10)
  .generateUri()
  .subscribe(uri => console.log(uri));
// โ†’ /articles?filters[status][$eq]=published&sort[0]=createdAt:desc&pagination[page]=1&pagination[pageSize]=10

The full query-builder API, pagination helpers, per-driver feature matrices, and TypeScript types are documented at ng-qubee.andreatantimonaco.me.

License

MIT ยฉ Andrea Tantimonaco