Angular JSON:API setup

Installation

npm install @datx/jsonapi-angular

Setup

Disable MobX

Update main.ts and test.ts by adding this import:

import '@datx/core/disable-mobx';

Update tsconfig.json mobx path:

{
    "compilerOptions": {
    ...
        "paths": {
            "mobx": ["./noop.js"],
      ...
        },
    ...
    }
}

noop.js can be just an empty file.

This step will become unnecessary in future versions of DatX.

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({
  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 {}

Config values passed via forRoot and via DATX_CONFIG and the default values will be merged together into a final configuration object. Values provided DATX_CONFIG DI token take precedence over values from forRoot, and default values have the lowest precedence.

In the example above, the final config will use some default values, NetworkOnly caching option (as defined in forRoot) and whatever value environmentVariablesService.get('MY_API') returns for baseUrl (as defined in DATX_CONFIG provider).

Usage

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 { Field } from '@datx/core';
import { BaseModel } from 'src/app/base-model';

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

  @Field()
  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!