In my Angular web application, I'm utilizing the AngularFire library to interact with Firestore database.
Within the constructor of a component, I want to subscribe to a collection of documents and map these documents to an array whenever the value changes function is triggered.
Rendering this list in the frontend is easily achievable using the provided syntax.
// Component Constructor
constructor(private afs: AngularFirestore) {
this.itemsCollection = afs.collection<Item>('items');
this.items = this.itemsCollection.valueChanges();
}
// Component Template
<ul>
<li *ngFor="let item of items | async">
{{ item.name }}
</li>
</ul>
However, I require an array (or object) of the documents within that collection for additional logic in rendering other elements. For instance, I have an "isChecked" function that determines if a checkbox should be checked based on whether an item exists in the document collection.
async isChecked(itemID) {
if(items[itemID]) {
return true;
} else {
return false;
}
}
So, the question remains - how can I retrieve the documents into another variable while ensuring it stays updated with valueChanges?