- Ionic: 6.20.8
- AngularFire: 7.5
This is a 10-hour web competency project. I'll use this README.md to explain myself a little and discuss parts of the app that could be done in different ways.
I didn't get around to doing this, but I should have put icons on all the buttons and then use a media/container query to only show the icon on small screens, but show the text and icon on larger screens.
I like to have a BaseComponent (saved in src/app/shared/components/base.component.ts
) which has a simple addSubscriptions
method that takes a variable list of Subscription
and handles correctly unsubscribing from them in the ngOnDestroy
method. I put this in initially but haven't really needed to use this in this project, as I've been able to leave the handling to the async pipe in the HTML.
I like to keep data model class definitions in a separate file to the service, I've found this reduces clutter. But equally you could move the deserialize()
method into the service and keep the class definition file a bit slimmer.
It seems AngularFire has just been updated but its docs haven't. For example it suggests to fetch a collection using the syntax ...
constructor(firestore: Firestore) {
const collection = collection(firestore, 'items');
this.item$ = collectionData(collection);
};
but then its section on querying uses the older syntax like ...
constructor(firestore: AngularFirestore) {
this.items = firestore.collection('items').valueChanges();
}
so it's been a little confusing!