@ternwebdesign/firebase-store v0.2.6
FirebaseStore
Use the FirebaseStoreService to generate an out-of-the-box CRUD-service on top off the @angular/fire
collection module.
Installation
npm install @ternwebdesign/firebase-store
This library is dependent on firebase and @Angular/fire libraries.
Use the angular fire quickstart to set up firebase to your angular project.
Usage
First make sure @angular/fire
is initialized. Create a new service and extend that service with the FirebaseStoreService. Add the model you want to store in a firebase collection as generic type. Next inject the AngularFirestore into this service. Use this to add a firebase collection to the parent using the this.setCollection()
method in the constructor of the service.
import { Injectable } from '@angular/core';
import { FirebaseStoreService } from '@ternwebdesign/firebase-store';
import { Model } from '../models/model.model';
import { AngularFirestore } from '@angular/fire/firestore';
@Injectable({
providedIn: 'root'
})
export class ModelService extends FirebaseStoreService<Model> {
constructor(private db: AngularFirestore) {
super();
this.setCollection(db.collection<Model>('Model'));
}
}
What do you get
Get
service.get('ID');
Using this method it is possible to get a specific document from the collection using the specified id. All methods are developed to add the firebase identifier to the id-property of the model. So you can just use model.id to get the id that is used as an argument in this method.
GetAll
service.getAll();
Use the getAll method to get all documents from the collection.
Add
service.add(model: Model);
Adds the new document to the collection. Returns the document including the new id. It is not possible to prefill the id property when adding the model to the collection. Therefore the id property will always be deleted before uploading the model to the collection.
Update
service.update(model: Model);
Updates the model in the firestore collection. Returns the document.
Delete
service.delete(model: Model);
Deletes model from the collection. Returns empty observable.
ConvertItem
protected convertItem(item: any): Model {
return convertYourItemHere();
}
All items are converted using the convertItem method of the FirebaseStoreService. The only thing this initially does is return the same item, but you are able to overwrite this method in your class using above example. Use this for example to convert strings to dates or any other conversion you need to convert your backend model to something you can use in the frontend.
Using a sub-collection
import { Injectable } from '@angular/core';
import { FirebaseStoreService } from '@ternwebdesign/firebase-store';
import { Model } from '../models/model.model';
import { Parent } from '../models/parent.model';
import { AngularFirestore } from '@angular/fire/firestore';
import { ParentCollectionService } from '../core/parent-collection.service';
@Injectable({
providedIn: 'root'
})
export class ModelService extends FirebaseStoreService<Model> {
constructor(private db: AngularFirestore,
private parentCollectionService: ParentCollectionService) {
super();
this.parentCollectionService.selected()
.subscribe(selectedId => !!selectedId ?
this.setCollection(db.doc<Parent>(`Parent/${selectedId}`).collection<Model>('Model')) :
this.setCollection(null))
}
}
Getting a sub-collection is slightly more tricky since a sub-collection needs the doc/id of the specific parent. Somehow get the id of the parent collection and use this to get the sub-collection. Above you find an example of how we are getting the sub-collection for a selectedId from the parent collection It is only possible to add one collection to a service.
Extending the service
This service just adds the basic CRUD methods to your service. If you need anything else (query's for example) just use the AngularFirestore in you service to add any method you like on top of the existing methods. If you need a different implementation of a method, just overwrite the parents method and implement your own.