How can I force the reload of parent component from its child component?

This app was written using Angular 17 (standalone) and Ionic 7. Tab1Page ("cards") is the parent and ItemCardComponent is its child (a Swiper carousel of ion-cards which values are recovered from a Firestore Database):

export class Tab1Page {
slides: itemData[] = [];

constructor(public itemService: ItemService) {
this.ionViewDidEnter();
}

ionViewDidEnter() {
this.itemService.getThings().subscribe((items: itemData[]) => {
const extra: itemData = {
user: '',
name: '',
picture: ''
}
items.unshift(extra)
this.slides = items;
});
}
}


From ItemService:

getThings(): Observable<itemData[]> {
const itemsRef = collection(this.firestore, 'userItems');
const q = query(itemsRef, where('user', '==', this.auth.currentUser!.uid) );
return collectionData(q, { idField: 'id'}) as Observable<itemData[]>;
}


NOTE: First card ('extra') is always blank and it's used for data input. first card of the Swiper carousel

When a new card is saved ("setThing" is called from the child "ItemCardComponent"), data is stored as a new item to 'userItems' (Firestore collection). From ItemService:

setThing(thingUnit: itemData) {
thingUnit.user = this.auth.currentUser?.uid;
const itemsRef = collection(this.firestore, 'userItems');
return addDoc(itemsRef, thingUnit);
}


I think I get to a correct diagnose of the issue, but I'm stuck on what to do to solve it.

Everything works fine when it come to save (and recover) data from Firestore. Except for the carousel view, which goal was to be updated in real time, but currently requires a manual refresh of Tab1Page to show the new slide. Obviously, It doesn't update because the saving event (that occurs in child) doesn't trigger any kind of change to the slide array (that relies on the load/reload of parent). The calls that updates this.slides array with the values from "items" will only happen when the constructor and ionViewDidEnter() run.

What commands should I use to force a refresh of Tab1Page (parent), taking into account that I'll need to run it from the ItemCardComponent (child), together with the card saving/editing functions?

I guess if that should be other solutions to this, because I understand that this current code implies too much calls to Firebase and that's not the optimal scenario.

Continue reading...