Online demo

Supported features

Migration

Usage

Installation

yarn add ngx-jsonapi@2.0.0-rc.4 --save# or npm if you wish...

Dependecies and customization

/* .. */import{NgxJsonapiModule}from'ngx-jsonapi';@NgModule({imports:[NgxJsonapiModule.forRoot({url:'//jsonapiplayground.reyesoft.com/v2/'})]})exportclassAppModule{}

Enable Local Cache

/* .. */import{NgxJsonapiModule}from'ngx-jsonapi';import{JSONAPI_RIPPER_SERVICE,JSONAPI_STORE_SERVICE}from'./core';import{StoreService}from'ngx-jsonapi/sources/store.service';import{JsonRipper}from'ngx-jsonapi/services/json-ripper';@NgModule({imports:[NgxJsonapiModule.forRoot({url:'//jsonapiplayground.reyesoft.com/v2/'})],providers:[{provide:JSONAPI_RIPPER_SERVICE,useClass:JsonRipperFake},{provide:JSONAPI_STORE_SERVICE,useClass:StoreFakeService}]})exportclassAppModule{}

Examples

Defining a resource

import{Injectable}from'@angular/core';import{Autoregister,Service,Resource,DocumentCollection,DocumentResource}from'ngx-jsonapi';import{Book}from'../books/books.service';import{Photo}from'../photos/photos.service';exportclassAuthorextendsResource{publicattributes={name:'default name',date_of_birth:''};publicrelationships={books:newDocumentCollection<Book>(),photo:newDocumentResource<Photo>()};}@Injectable()@Autoregister()exportclassAuthorsServiceextendsService<Author>{publicresource=Author;publictype='authors';}

Get a collection of resources

Controller

import{Component}from'@angular/core';import{DocumentCollection}from'ngx-jsonapi';import{AuthorsService,Author}from'./../authors.service';@Component({selector:'demo-authors',templateUrl:'./authors.component.html'})exportclassAuthorsComponent{publicauthors:DocumentCollection<Author>;publicconstructor(privateauthorsService:AuthorsService){authorsService.all({// include: ['books', 'photos'],}).subscribe(authors=>(this.authors=authors));}}

View for this controller

<p*ngFor="let author of authors.data; trackBy: authors.trackBy">    id: {{ author.id }}<br/>    name: {{ author.attributes.name }}<br/>    birth date: {{ author.attributes.date_of_birth | date }}</p>

Collection sort

letauthors=authorsService.all({sort:['name','job_title']});

Collection filtering

authorsService.all({remotefilter:{country:'Argentina'}});

Get a single resource

authorsService.get('some_author_id');

More options? Include resources when you fetch data (or save!)

authorsService.get('some_author_id',{include:['books','photos']});

Add a new resource

letauthor=this.authorsService.new();author.attributes.name='Pablo Reyes';author.attributes.date_of_birth='2030-12-10';author.save();

Need you more control and options?

letauthor=this.authorsService.new();author.attributes.name='Pablo Reyes';author.attributes.date_of_birth='2030-12-10';// some_book is an another resource like authorletsome_book=booksService.get(1);author.addRelationship(some_book);// some_publisher is a polymorphic resource named company on this caseletsome_publisher=publishersService.get(1);author.addRelationship(some_publisher,'company');// wow, now we need detach a relationshipauthor.removeRelationship('books','book_id');// this library can send include information to server, for atomicityauthor.save({include:['book']});// mmmm, if I need get related resources? For example, books related with author 1letrelatedbooks=booksService.all({beforepath:'authors/1'});// you need get a cached object? you can force ttl on getletauthor$=authorsService.get('some_author_id',{ttl:60}// ttl on seconds (default: 0));

Update a resource

authorsService.get('some_author_id').suscribe(author=>{this.author.attributes.name+='New Name';this.author.save(success=>{console.log('author saved!');});});

Pagination

authorsService.all({// get page 2 of authors collection, with a limit per page of 50page:{number:2;size:50}});

Collection page

Local Demo App

git clone git@github.com:reyesoft/ngx-jsonapi.gitcd ngx-jsonapiyarnyarn start

Colaborate