I have a home page that displays results based on some user information. From results page user can navigate to profile page and edit information. After edit information, they navigate back to home page. The problem is, the home page not refreshed with new results. It still shows old results. How can i reload this page with the new data.
home.page.ts:
openProfilePage() {
this.router.navigate(['/profile']);
}
profile.page.ts
onSubmit() {
this.router.navigate(['/home'], {replaceUrl: true});
}
You can trigger a call you need to make to update the info on:
ionViewDidEnter() {
console.log('ionViewDidEnter ');
// call update function
}
ionViewWillEnter(){
//here you check data is changed or not and call your function according to that this method call every time when navigate to home page
}
The main interface for my app is dynamically built based upon whether or not the app has been activated. I created a previous route service that uses Angular’s Activated Route to detect if the main interface needs to be updated without doing a complete refresh.
Related
I am using Bootstrap 5.0.2 as the basis of my website, I finally got the modal to appear on page opening, thanks stack overflow, my aim is to not have the modal appear should the visitor move to another page and then return.
This is the code for running the modal. What do I need to add to make it only function the first time this page is viewed per session?
<script>
window.addEventListener('DOMContentLoaded', () => {
const modal = new bootstrap.Modal(document.querySelector('#myModal'));
modal.show();
});
You would need to implement sessionStorage.
When a user visits the page, we check to see if the sessionStorage contains a value for the modal. If it is the first time they load the page, it would not contain a value as we haven't set anything to it yet. In that case, we show the modal as normal and set a value for the sessionStorage. That way, when the user refreshes the page the value is already set in sessionStorage so the if statement will not run.
window.addEventListener('DOMContentLoaded', () => {
if (!sessionStorage.getItem("modal")) {
const modal = new bootstrap.Modal(document.querySelector('#myModal'));
modal.show();
sessionStorage.setItem("modal", "blah");
}
});
n project I have a Home page(with list of movie data) with HomeBloc. On clicking the a single movie cell I navigate to movie details page which has MovieDetailsBloc. Now in the details page I can edit name or make movie as favourite etc, this needs to be reflected in Home page.
To update the Home page after a change in Movie details page, I am sending HomeBloc to Movie details page like this
MovieDetailsPage(homeBloc: <instance of HomeBloc>)
and in the MovieDetailsBloc I am calling the event of HomeBloc to update the Home page like this
homeBlocInstance.add(<home event>)
This method is working.
My question is Is this good method like passing bloc to a page? There will be many places from where this Home page may need to be updated. For example
Make changes in settings -> Update home page
In this case should I pass the Home bloc to settings page? But what if the navigation is like this Home page -> Summary page -> settings page, should I keep passing the HomeBloc from Home page to Summary page and then settings page? This does not seem right.
Am i doing it right?
or is there any better solution?
If you're using GoRouter, When you're navigate back to home, you can just pass param to the router state, so when you are go to homepage you can do some process.
For example :
context.goNamed(
'home',
queryParams:{
'somestate': 'somevalue',
'somesetting': 'settingValue',
},
);
As part of the functionality of the app we are developing, when an android alarm is fired, a dialog box is to appear with an "Accept" or "Reject" button. Selecting reject does nothing, but selecting "Accept" triggers a callback from the plugin, which I have passed a function into. This function causes the ionic app to navigate to the root page of the app.
The issue I am having is, when I then navigate to another page after that where the user selects a value, and this value is displayed back to them and a button is enabled, the value display is not updating, and the button is not becoming enabled. Nothing seems to be updating.
What I have found is that pressing the back button on my android device will cause the page to update, which is not ideal.
This functionality works without the callback from the plugin.
What is happening here? And how do I fix it?
Passing the function into the plugin.
alarms_plugin.onAlarmRecieved = (alarmId) =>{
this.events.publish('alarmRecieved', alarmId);
}
Plugin-side functions
alarmRecieved: function(alarmId){
alarms_plugin.onAlarmRecieved(alarmId);
}
onAlarmRecieved: null
Navigating to root page on alarmRecieved
this.events.subscribe('alarmRecieved', (alarmId) =>{
if(alarmId != 'TIMEOUT')
this.nav.setRoot(HomePage);
});
Fix found by surrounding the this.nav.setRoot(HomePage) in this.zone.run(..).
Supposedly calling navigation within a subscription event causes issues like I was having.
When the user views the home screen for the first time - they are being sent there via this.nav.setRoot(Page). This presents an issue when I have three other pages settings root to a page. For example - I go to the home page, which is set root, so that home page data is loaded initially for the first time. Then the user navigates to the message page. Then the user goes back to the home page, the data is reloaded again. I don't want that to happen. I would like to only call it once, but due to setRoot, it refreshes the page. Just like how navCtrl.push(Page) and .pop, the data is not refreshed. I have a hamburger navigation style and that's why I have the set roots for each page in the hamburger navigation.
app.comp.ts
openPage() {
this.nav.setRoot(Page);
}
openPageTwo() {
this.nav.setRoot(MessagesPage);
}
How do I override the nav.setRoot refresh? Or use something else entirely?
Thanks
Exactly where are you refreshing your data? In what function?
Lifecycle events
I think your problem will be solved by using the correct lifecycle event. For example, ionViewDidLoad :
Runs when the page has loaded. This event only happens once per page being created. If a page leaves but is cached, then this event will not fire again on a subsequent viewing. The ionViewDidLoad event is good place to put your setup code for the page.
Have you tried refreshing your data there?
Global variable or service
As an alternative, you can create a global variable or a service that holds your data. Once you setRoot to a page for the first time, do the refresh and update the global value and do not refresh it the subsequent times that you setRoot to that page. This is not my favorite way, but will do the job for you.
Tabs:
Rather than setting roots several times, you may wanna try ionic tabs.
By setting a rootpage using navCtrl.setRoot(), you tell Ionic this page is the begin of the navigation tree of your application. For example, after a login, you should .setRoot(HomePage);
When you want to navigate from HomePage to MessagesPage, you should use navCtrl.push(), to pop the MessagesPage on top of the HomePage. eg; navCtrl.push(MessagesPage);
You can use a provider, since it is stored on memory once and every one that injects it will get its properties and data.
some-provider.ts
import { Injectable } from '#angular/core';
#Injectable()
export class SomeProvider {
public data: DataModel;
constructor(public http: Http) {
}
}
And then import that on your app's module providers variable.
After, get this provider on your component's constructor
some-page.ts
#Component({
selector: 'app-some-page',
templateUrl: 'app-some-page.html'
})
export class AppSomePage {
data: DataModel;
constructor(public someProvider: SomeProvider) {
this.data = this.someProvider.data;
}
}
I am creating an App with Ionic2 and the requirement is -
- the app when first loaded will show a Log In page and when logged in
- will have a Side-Menu enabled pages
The starter project shows that the Side Menu as the root of the app and loads first before any other page is open - then it loads the other related pages.
How can I build an app that Loads Log In page first and then set the Side Menu as the main navigation and never shows up the Log In screen??
I did this with ionic 1 but not being able to figure out with ionic2
Please help.
One solution would be to disable menu on Login screen and then to enable it after login.
You can disable menu by injecting MenuController and then use:
import {NavController, MenuController} from 'ionic-angular';
ionViewDidEnter() {
//to disable menu, or
this.menu.enable(false);
}
ionViewWillLeave() {
// to enable menu.
this.menu.enable(true);
}
#Digital IQ, you have to set your login page as the rootPage in your existing app.ts file and use MenuController in login page to make menu enable onPageDidLeave.
The example for this is available in ionic conference app where they have tutorial page before getting in to the actual application. Refer this for menu control and this (line 50) to set the initial page.
The above problem must have occurred because the user had surely logged in, but the changes i.e. setting it as the current user didn't take place in side menu page.
For that you can use Events API
Events is a publish-subscribe style event system for sending and responding to application-level events across your app.
For reference, go through the following answer-
Ionic 3 refresh side menu after login
kind Attn [vahid najafi & Aish123]
I tried something more easy and I found it working.
I set the LogIn page as the root when the app first loaded - and I removed 'menuToggle' button from this template.
Then I imported the Component I want to redirect on Log in
I created a singIn function in LogInPage class as follows:
signIn (){
let navRef = this.app.getComponent('nav');
navRef.setRoot(HelloIonicPage);
}
and it worked like a charm