Component view inside ion-menu not updating

Ionic Framework ionic-v3
1

Hey everyone, not sure why this is happening and I’ve been banging my head against a wall.

I have a component inside my ion-menu and data is updating when looking at console.log, but the view is not reflecting those changes. When my menu opens, I fire an event to refresh the data in the component.

tabs.html

<ion-tabs...></ion-tabs>

<ion-menu [content]="mycontent" (ionOpen)="contactsMenuOpened($event)" (ionClose)="contactsMenuClosed($event)" side="right" id="contacts"> 
    <ion-content>
        <contacts-menu #contactsMenu></contacts-menu>
    </ion-content>
</ion-menu>

The tabs component fires the contactsMenuOpened function which gets the instance of my component ContactsMenu which then fires a function inside that ContactsMenu component, refreshContacts().

contactsMenuOpened() {
    this.contactMenu.refreshContacts();
}

The ContactsMenu.refreshContacts() function fires and new data is retrieved, but the view is not updated and I cannot understand why.

contacts-menu.ts component

public refreshContacts() {
    this.loadingContacts = true;
    this.getUserContacts();
}

getUserContacts() {
    this.contactsSubscription = this.contactsService.getContacts(params).subscribe(
        (data) => {
            if (this.params.page > 1) {
                this.contacts = this.contacts.concat(data.list);
            } else {
                this.contacts = data.list;
            };
            this.pagination = data.meta.pagination;
            this.loadingContacts = false;
        },
        (err) => this.handleError(err)
    )
}

contacts-menu.html template

<div padding *ngIf="loadingContacts">
     <ion-spinner></ion-spinner>
</div>
<ion-list>
    <contact-item *ngFor="let contact of contacts" [contact]="contact"></contact-item>
</ion-list>

I use code similar to this in other places in the app, and it works but this is not working. Any ideas why?

It does work by using this.zone.run, but is that really the correct way to handle this?

Thanks

2

Did you ever get this figured out? I’m having the same issue with ionClose. I’m guessing the view doesn’t repaint/render by default? Maybe some other function needs to be called?

3

I also have this problem :pensive:

I should probably add that it’s not limited to components inside the sidemenu. A simple counter:number in app.component.ts does not update {{counter}} in app.html if incremented in (ionOpen). It shows the (now old) updated value on the next ionOpen however.

My goal was to update values in the sidemenu from an async http call.