@solidev/data

A Django-REST-Framework-style data layer for Angular. Declare a model once and get HTTP access, querysets, filtering, sorting, pagination, forms, validation and display/edit widgets — all driven by that single declaration.

export class ProductBase extends DataModel {
  static override readonly __name: string = "ProductBase";

  @charField({ description: "Name", maxLength: 200 })
  public name!: string;

  @charField({
    description: "Status",
    choices: [
      { value: "draft", desc: "Draft" },
      { value: "published", desc: "Published" },
    ],
  })
  public status!: string;

  @foreignKeyField({ description: "Category", related: "Category", priority: -1 })
  public category!: number;
}

<data-dispedit [model]="product" field="name" mode="dd" [editable]="true" />
<data-dispedit [model]="product" field="status" mode="dd" [editable]="true" />
<data-dispedit [model]="product" field="category" mode="dd" [editable]="true" [collection]="categories" />

That is the whole idea: status renders as a <select> and category as an FK dropdown because the field metadata says so. You declare the model; the UI follows.

Install

npm install @solidev/data

bootstrapApplication(AppComponent, {
  providers: [{ provide: DATA_API_URL, useValue: "https://api.example.com/v1" }, provideHttpClient()],
});

What's in the box

| Module | What it gives you | | -------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | | data | DataModel + field decorators, Collection<T>, Queryset<T>, DataBackend (with SSR TransferState support) | | modellist | ModelListService — field selection, filters, sorter, paginator, and the components to render them | | dispedit | <data-dispedit> and friends — metadata-driven display/edit, FK/M2M pickers, flags, safe-delete | | auth | JWT service + interceptor with automatic refresh and replay | | messages, routing, updates, uploader, richedit | supporting pieces |

Documentation

• Guides — see the docs/ directory in the repository, also published in the generated documentation under Guides.
• API reference — generated with compodoc: npm run mkdocs:serve.
• Worked example — projects/data/src/examples/catalog/, a small catalog domain (tree categories, m2m tags, geolocated stores, flags) that is test-covered, so it cannot drift from the library.

Using this library with an AI agent

This package ships AGENTS.md — a rules file covering the model conventions and the runtime contracts that fail silently when broken. It is available in consuming projects at node_modules/@solidev/data/AGENTS.md.

Point your agent at it from your own AGENTS.md / CLAUDE.md:

This project uses `@solidev/data`. Before writing or changing any model, collection, list component, or `dispedit`
usage, read `node_modules/@solidev/data/AGENTS.md` and follow it.

Start here

Whatever else you skip, read the Relations guide and the Traps guide. The FK ⇄ details pairing is a runtime contract enforced by string concatenation, and most of the ways to misuse this library fail silently.

Requirements

Angular 22+. Peer dependencies: @angular/common, @angular/core, @ng-bootstrap/ng-bootstrap and jwt-decode, plus the engines behind the two editor entry points — prosemirror-* for @solidev/data/richedit and @codemirror/* for @solidev/data/mdedit. npm 7+ installs all of them with the package; the editors only reach your bundle if you import their entry point.

Licence

See LICENSE.