@datx/jsonapi-angular

@datx/jsonapi-angular

DatX is an opinionated data store. It features support for references to other models and first-class TypeScript support.

@datx/jsonapi-angular is a datx mixin that adds JSON API support for Angular applications.

---

Installation

npm install @datx/jsonapi-angular

Setup

Collection

Create a collection and provide it under APP_COLLECTION token:

import { Collection } from '@datx/core';
import { jsonapiAngular } from '@datx/jsonapi-angular';

export class AppCollection extends jsonapiAngular(Collection) {
  public static readonly types = [...];
}

import { APP_COLLECTION } from '@datx/jsonapi-angular';
import { AppCollection } from './collections/app.collection';

@NgModule({
  imports: [
    DatxModule.forRoot({
      baseUrl: 'https://my-api.com/',
    }),
  ],
  providers: [
    {
      provide: APP_COLLECTION,
      useValue: new AppCollection(),
    },
  ],
})
export class AppModule {}

Configure DatX

Provide DATX_CONFIG with your own values for the config:

import { APP_COLLECTION, DATX_CONFIG, setupDatx } from '@datx/jsonapi-angular';
import { AppCollection } from '.collections/app.collection';

@NgModule({
  provides: [
    {
      provide: APP_COLLECTION,
      useValue: new AppCollection(),
    },
    {
      provide: DATX_CONFIG,
      useFactory: (httpClient: HttpClient) => {
        return setupDatx(httpClient, {
          baseUrl: '/api/v1/',
        });
      },
      deps: [HttpClient],
    },
  ],
})
export class AppModule {}

Basic usage example

Create the base model:

import { IType, Model } from '@datx/core';
import { jsonapiAngular } from '@datx/jsonapi-angular';

export class BaseModel extends jsonapiAngular(Model) {
  public get id(): IType {
    return this.meta.id;
  }
}

Create specific domain models and add them to types in AppCollection

import { Attribute } from '@datx/core';
import { BaseModel } from 'src/app/base-model';

export class Artist extends BaseModel {
  public static endpoint = 'artists';
  public static type = 'project';

  @Attribute()
  public name!: string;
}

export class AppCollection extends jsonapiAngular(Collection) {
  public static readonly types = [Artist];
}

Create services for managing the models (one service per model):

import { Inject, Injectable } from '@angular/core';
import { CollectionService } from '@datx/jsonapi-angular';

@Injectable({
  providedIn: 'root',
})
export class ArtistsService extends CollectionService<Artist, AppCollection> {
  protected ctor = Artist;
}

Inject the service in your component or other services and use methods like getManyModels and getOneModel:

export class ArtistsComponent {
  public artists$ = this.artistsService.getAllModels();

  constructor(private readonly artistsService: ArtistsService) {}
}

That's it!