I am learning ionic 2 and as part of my learning process, i am creating a basic ionic 2 app.
Below is a page from my app. I have some text contents which i would like to display in About page in app. Initially only title must be visible and once the user clicks on the title, another page with text content must be opened.
How do i achieve this? I mean, which component to use for this? Any guidance will be great. Any other approach/suggestion to achieve this is also welcome, i want the page to be clutter free.
To navigate from one page to another, You would have to use the navController offered by Ionic 2. Basically all navigation in Ionic 2 happens using the Stack data structure abstracted through the navController. This way you can push pages on top of other pages using
.push(ClassNameOfThePageYouWantToPush,{paramsYouWantToPassToTheNewPage})
And existing pages can be popped from the stack by calling
.pop(ClassNameOfThePageYouWantToPush,{paramsYouWantToPassToTheNewPage})
You can find more info here
To trigger it in the UI, use a (click) handler to call a function
<ion-title (click)="openNextPage()">About</ion-title>
In you .ts file you can then import the navController and add it to the constructor.
import { NavController, NavParams } from 'ionic-angular';
#Component({
selector: 'page-page2',
templateUrl: 'page2.html'
})
export class Page2 {
constructor(public navCtrl: NavController) {
}
openNextPage(){
this.navCtrl.push(PageYouWantToOpen);
}
}
Because this is such a common feature when you use the ionic 2 cli to generate a page
$: ionic g page my-page
It will automatically add the navController and navParams ready to be used.
Related
How do I implement Ionic 4/Angular navigation in such a way that the user CANNOT navigate backwards though their entire experience (screens) on the application?
I've ported my Ionic 2 application to Ionic 4, and feel like I've lost some critical navigation functionality.
Specifically: as a user moves forward in the application, and bounces around the different areas of my application, they are now able use the Android back button to navigate backwards through the FULL HISTORY of their previous screes. Whereas previously Ionic would STOP them moving backwards once the user hit a root page.
For example, a user would navigate from the main Welcome Page, then to the main Products page, then to Product Details page, then to the main Orders page, and then Order Details page. Then, if they start to use the Android back button, they're allowed to navigate through the entire history of screens, all the way back to the Welcome Page.
Previously, they would be force stopped at the last root/main page (e.g. the Orders page).
I don't think I had to use any application specific logic to dynamically disable the Android back on the main pages. I think the previous versions of the Ionic framework was smart enough to stop going backwards too far.
How do I implement Ionic 4/Angular navigation in such a way that the user CANNOT navigate backwards though their entire experience (screens) on the application?
I understand that ionic 4 uses angular's routing.
I am NOT asking to disable the Android back button.
This is a much simpler solution that has been working for me. Essentially you just have to tell ionic/angular when you are about to navigate to a root page and then it will stop the back button taking you past it.
import { Router } from '#angular/router';
import { NavController } from '#ionic/angular';
...
constructor(private navCtrl: NavController, private router: Router) { }
...
this.navCtrl.setDirection('root');
this.router.navigateByUrl('/new-root-page');
In ionic v4 this seems to work fine:
in app.component.ts inside initializeApp() function add the following:
initializeApp() {
this.platform.ready().then(() => {
this.platform.backButton.subscribeWithPriority(9999, () => {
document.addEventListener('backbutton', function (event) {
event.preventDefault();
event.stopPropagation();
console.log('hello');
}, false);
});
// here put instructions for splashScreen, statusBar, etc.
});
}
I'm developing a PWA on ionic 3 with Angular 4 and I've failed multiple times trying to make a nice UI that show's in-app notifications about events.
I have a NotificationsService that is responsable for everything that has to do with getting the notification from Firebase.
My initial approach was to define a UI component (a.k.a notification-box) which would observe a property in the Notification Service and consume the notification provided by the service and display them nicely on top of the screen.
This sounds all nice and good but I created this component and had 3 issues:
Ionic 3 doesn't allow (AFAIK) a component to be 'global' and present in all app pages.
Including the tag of my component <notification-box></notification-box> on top of every page it's not a very good idea because components get instantiated and destroyed multiple times making it difficult to keep Subscriptions to the Observable notification property in the Service, and this could lead to a notification not arriving in between switching of pages.
If a notification where to arrive with a modal open, the notification would display behind the modal and my intent is to show notifications always on top.
I ended up using ToastController from ionic-angular which always displays on top no matter what (although it's a bit ugly and I want to switch to something like angular2-notifications).
How did Ionic achieve this "always on top" behaviour? Is there any way I can replicate that with a class of my own or Extend the ToastCtrl?
You can achieve what you want via provider and yes you will still need to inject such provider into every page that you want to see notifications in. You don't need to modify those pages' view (html templates) though.
I had similar need (to present "toast" inside of the app regardless of pages).
I solved this by making this provider a singleton provider (means we declare it at the app.module.ts in providers section) that is injected into every page (import and add to constructor):
import { Injectable } from '#angular/core';
import { ToastController } from 'ionic-angular'
#Injectable()
export class Toaster {
constructor (private toastCtrl: ToastController) {
}
presentToast(message, position, cssclass) {
let toast = this.toastCtrl.create({
message: message,
closeButtonText: "OK",
showCloseButton: true,
cssClass: cssclass,
position: position
});
toast.present();
}
presentSimpleToast(message, position) {
let toast = this.toastCtrl.create({
message: message,
duration: 3000,
position: position
});
toast.present();
}
}
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;
}
}
How can I navigate to the root page with ionic 2, when i use this code :
this.navCtrl.push('HomePage');
it made the error below
Uncaught (in promise): invalid link: HomePage
You can use this.navCtrl.popToRoot();, It'll pop all views and there's no need to set a new root. This'll also not fire some lifecycle hooks like ionViewDidLoad() and ionViewWillLoad().
Hope this helps.
First Check your page component if you have
import { IonicPage } from 'ionic-angular';
and because your using lazy page loading you should have this. #ionicpage
#IonicPage()
#Component({
....
})
last resort is try to resart or reset your ionic serve.
sometimes it happen . and i think its ionic bug. but no big deal.
I have recently upgraded to ionic 3 implementing the IonicPageModule for navigation. The push and setRoot works for all navigating however i am stuck at the trying to reference the pages in the app.component.ts
Normally i would reference the page from the import like so
this.rootPage = user ? ProgramsPage : LoginPage;
Where LoginPage and ProgramPage are declared in the app.module.ts
However in the new angular 4 / ionic 3 setup references to the "pages" are referenced with strings without an import in the related page.ts and seemly integrated with the navCtrl's push and set
I have tried
import { LoginPageModule } from '../pages/login/login.module';
But that does not make sense.
I figured the whole point of creating modules per page was to firstly enalble lazy loading but also minimize the import code on pages without having to create a config export class.
And the thing is you cannot declare the LoginPage twice and seeing as though it is already declared as a module through the IonicPageModule one cannot add that export class again.
So just wondering how do you reference a ionic 3 page module when you want to apply logic?
I came across an article that implemented close to what you really wanted; though it talked more about cloud functions but at the beginning it tried to solve your problem in a very fashionable way. Take a look https://javebratt.com/firebase-cloud-functions-profile/
if your pages are being declared as:
/* imports and stuff here ... */
#IonicPage()
#Component({
selector: 'page-user',
templateUrl: 'user.html'
})
export class UserPage { /* constructor, your code & else ... */ }
or generated using the ionic-cli by running: ionic g page NewAppPage
you will be able to use the string page name instead of using the page object (that also requires you to import the page).
Take a look at https://www.javascripttuts.com/ionic-3-new-pages-lazy-loading/ , it may help you understand a little bit more about lazy loading and pages inside the app component.