How to trigger an event automaticly when I fall back on my home page?


#1

hi community,

I want to trigger an event when I return to my main page.
I am on my homepage (page A), which has an ADD button that allows me to add a new element (page B). When the new entry is validated, I close This view (this.viewCtrl.dismiss (): wink: and I fall back on my page A ".
How to refresh this page A automatic without using AJAX or click on a button REFRESH ???

thank you for helping me.


#2

Have you tried

ionViewDidEnter() {
    // Refresh
}

#3

yes I tried it but nothing


#4

@philchoco If you are using the ViewController method dismiss, and not pop in the NavController, I think you need to execute some callback after you dismiss the page. I do this with a popover I create:

ComponentA (caller - page):

import { PopoverController } from 'ionic-angular';

...

let params: ComponentBParams = {
	param1,
	param2,
	onDismiss: () => this.refresh(),
};
let popover = this.popoverCtrl.create(ComponentB, params);
popover.present();

ComponentB (called - popover):

import { NavParams, ViewController } from 'ionic-angular';

...

export interface ComponentBParams {
	param1?: Param1Type;
	param2?: Param2Type;
	onDismiss?: () => any;
}

...

private params: ComponentBParams;
private dismissed: boolean;

...

public ngOnInit() {
	let params: ComponentBParams = this.navParams.data || {};
	this.params = params;
}

...

private dismiss() {
	if (!this.dismissed) {
		this.dismissed = true;
		let onDismiss = this.params.onDismiss || null;
		
		this.viewController.dismiss().then(
			() => onDismiss && onDismiss()
		);
	}
}

Then you just need to call this.dismiss() inside the ComponentB.


#5

With this code, I can’t refresh automatically after closing the popover view!


#6

@philchoco In my case whenever I close the popover view the callback is called (onDismiss) and the page (ComponentA) is refreshed (the refresh method is called; I just put the same code that I would put in ionViewDidEnter).

If you don’t want to have to define a callback in your popovers, you can use the onDidDismiss method before present the popover, that is a better approach IMO:

ComponentA:

...
let params: ComponentBParams = {
	param1,
	param2,
};
let popover = this.popoverCtrl.create(ComponentB, params);
popover.onDidDismiss(() => this.refresh());
popover.present();

Then your popovers don’t have to receive a callback as param (nor call it).


Ionic Refresh Current Page
#7

Hi bro.
Sorry for my late. I was in exam during the week. I test your solution this morning and I get error:
Typescript Error
Property ‘onDidDismiss’ does not exist on ‘Promise’.

Do you have some ideas?


#8

@philchoco The onDidDismiss method should be called in the popover, not in a promise. Are you sure you code is like this:

let popover = this.popoverCtrl.create(ComponentB, params);
popover.onDidDismiss(() => this.refresh());
popover.present();

?

Have in mind that it is popover.onDidDismiss(() => ...) and not popover.present().onDidDismiss(() => ...).

Also, the popover variable type shouldn’t be a promise (see its type in your IDE or editor, if possible).


#9

your solution is good, I corrected and works well.
would it be possible to use NavController instead of PopoverController?


#10

Hi @mich356c
I retest your solution today, it works perfectly and solve my problem. only it does not work in the presence of the tabs.

Have you some idea??


#11

ngOnDestroy might help? fires when something is closed/destroyed

ngOnDestroy(){

}


#12

Hi bro
Let me explain you
When I run the application, I have 2 tabs (tab A and tab B) on the tab A, I have a button that opens a page that allows me to add a new item.
I want unless the item is added, the page closes, and the tab A will refresh automatically.


#13

@philchoco You can use navController.push(ComponentB) and in ComponentA put the refresh method in the ionViewDidEnter lifecycle hook method. So when you go back from ComponentB the hook will be automatically called.


#14

Yes I know. I done it, and it it working well for others pages, not for the tabs’s pages!


#15

I think the easiest would be to create a provider with a subscriber. So TabA is subscribed to this, and when the “Add item” page closes it sends an update to the subscriber, TabA receives this and updates the list. Would that work? :slight_smile:


#16

@philchoco I think that what is happening in your tabs page is that the TabsPage itself (the one that has the ion-tabs tag) is receiving the navigation event but not the page inside it, because ion-tabs create a new navigation context.

You can see if this is what is happening putting the ionViewDidEnter hook both in the TabsPage and in the TabPage inside it (the component you pass to ion-tab), and calling console.log() in the hook method.

I think that when you pop the page, the TabsPage will receive the event, but not the TabPage inside.


#17

Thank you all for your contribution of solutions. After more research on the subject, I realized that it will miss a few special items. now everything is in order with this part