A service to connect Akita and Angular Firestore
npm install akita-ng-fire!akita-ng-fire
If you are interested maintaining this library or want to contribute to it, please contact us creating an issue or write an email to:
fguezengar@cascade8.com
Simplify connection between Akita and Firebase inside an Angular project
Connect Firebase and Akita :
- [x] Firestore Collection
- [x] Firestore Document
- [x] Firestore Collection Group
- [x] Akita Array with Subcollections
- [x] Authentication
- [x] Real Time Database (beta)
Schematics :
- [x] ng generate collection-service
- [ ] ng generate collection-guard
| akita-ng-fire | Angular | Firebase | AngularFire |
| --------------| --------|----------|--------------|
| 7 | 12 | 9 | ^7.0 |
| 6 | 9-12 | 8 | ^6.1.5 |
Create an Angular project:
``
ng new project-name
cd project-name
Add @angular/fire:
`
ng add @angular/fire
> Setup your environment with AngularFirestoreModule.
You can use the akita-cli to instantiate an akita store.
In your component you can now start listening on Firebase :
`typescript
@Component({
selector: 'app-root',
template:
,
})
export class AppComponent implements OnInit {
public movies$: Observable; constructor(private service: MovieService, private query: MovieQuery) {}
ngOnInit() {
// Subscribe to the collection
this.service.syncCollection().subscribe();
// Get the list from the store
this.movies$ = this.query.selectAll();
}
}
`The
should looks like that :`typescript
@Injectable({ providedIn: 'root' })
@CollectionConfig({ path: 'movies' })
export class MovieService extends CollectionService {
constructor(store: MovieStore) {
super(store);
}
}
`⚠️: If you use Akita's router store, don't forget to import
Collection
Documentation for Collection can be found here :
- 🚀 Getting Started
- 🧙♂️ Collection Service API
- ⚗️ Collection Service Configuration
- 💂♀️ Collection Guard API
- ⚙️ Collection Guard Configuration
- 🎂 Collection Group API
Authentication
Documentation to manage authentication can be found here :
Cookbook 📚
Examples of what you can do with
Real time database
How to use the real time database service.
Document
You can subscribe to a specific document :
In Component :
typescript
ngOnInit() {
this.router.params.pipe(
switchMap(params => this.service.syncDoc({ id: params.id })),
takeUntil(this.destroyed$)
);
}
`Or with the Guard :
typescript
@Injectable({ providedIn: 'root' })
export class MovieGuard extends CollectionGuard {
constructor(service: MovieService) {
super(service);
} // Override the default
sync method
protected sync(next: ActivatedRouteSnapshot) {
return this.service.syncDoc({ id: next.params.id });
}
}
`Akita array with subcollection
typescript
import {
CollectionService,
CollectionConfig,
Query,
syncQuery,
} from 'akita-ng-fire';// A query that fetch all the articles with 5 comments
const articleQuery: Query = {
path: 'articles',
comments: (article: Article) => ({
path:
articles/${article.id}/comments,
queryConstraints: [limit(5)]
})
};@Injectable({ providedIn: 'root' })
@CollectionConfig({ path: 'articles' })
export class MoviesService extends CollectionService {
// syncQuery needs to be bind to the service and takes a Query as second argument
syncQuery = syncQuery.bind(this, articleQuery);
constructor(store: MoviesStore) {
super(store);
}
}
`> Here we use
to link the syncQuery to the service. This design helps you to only import what you need.To take advantage of types, add
"strictBindCallApply": true inside your tsconfig.json file.Now in Component:
`typescript
ngOnInit() {
this.service.syncQuery()
.pipe(takeUntil(this.destroyed$))
.subscribe();
}
`Or in the Guard :
typescript
@Injectable({ providedIn: 'root' })
export class MovieGuard extends CollectionGuard {
// Note: Here service has to be protected to access syncQuery
constructor(protected service: MovieService) {
super(service);
} // Override the default
sync method
protected sync(next: ActivatedRouteSnapshot) {
return this.service.syncQuery();
}
}
``Many thanks to :
- Netanel Basal for building, maintaining, and sharing his knowledge about Akita
- Loïc Marie for all his feedbacks and contribution.
- Eduard (ex37) for all his feedbacks and contribution.
- Ariel Gueta for his great article about Akita and Firebase.