I am migrating an application from ionic 3 to 5. In my app I need to access a modal component instance from the class where I create the modal in order to programmatically call a couple of functions on it.
In Ionic3 I used to get the component instance like this:
const myComponent = myModal.overlay.instance as MyComponent;
but on Ionic 5 the "overlay" property seems to have been removed.
How can I get the instance of my component in Ionic 5? Or is there a better way to call a function on the component contained in the modal?
Related
I'd like to change back button dynamically in app having localization feature in Ionic 5.
Of course, I can do it config.set function in Ionic 3 but it is deprecated in Ionic 5.
I want the same function I can use that in a page like profile setting page.
This is my current solution.
<ion-back-button [text]="backButtonText"></ion-back-button>
This works well in the page but I don't like to add the same code [text]="backButtonText" in other pages too.
I am creating a function that calculates a page loading time for each page of my Ionic 3 App (I use lazy loading). However, I am currently stuck in issues:
When does the page start creating HTML?
When does the page finish creating HTML?
When does the page complete downloading all resources on the page (image, etc …)?
Can anyone give me advice?
One thing to look at is https://blog.ionicframework.com/navigating-lifecycle-events/ this contains the ionic life-cycle eg. ionViewDidLoad(): Fired only when a view is stored in memory. This event is NOT fired on entering a view that is already cached. It’s a nice place for init related tasks.
Ionic 3's pages are also angular components so I'd imagine the another thing to look at is the component hooks. These methods are fired when in the stages of the component life cycle.
https://angular.io/guide/lifecycle-hooks
https://www.intertech.com/Blog/angular-component-lifecycle/
eg. ngAfterViewInit(){ stopTimer() } //this method is fired once Angular initializes component and child component content
To achive what you want you could have a provider that both pages link to. When you change page start a timer and stop it using ngAfterViewInit() or other more appropriate hook.
I'm integrating MB on my Ionic 3 project.
There's a map on my 'home' page. When user touches a button another map loads which uses the Directions API and after another click by user another map is supposed to load but won't.
The map div is present on this page but the styles and js script don't seem to get applied to it.
Is there a limitation which declares you cannot load MapBox 3 times in a project or is there something from my end?
Thank you in advance.
So, sigh, the problem was I was using the same map id on all my HTML pages containing a map div, forgetting Ionic applications are called one-page-apps.
Renaming map container divs fixed it.
cannot set root page dynamically so that back button can be routed back to unwanted pages.
to Set root page dynamically like in ionic-3 setroot()
this.app.getRootNav().setRoot(DrivernumberComponent);
this.navCtrl.push('FilmDetailsPage');
Ionic 4 relies on Angular's router, the NavController has been changed to reflect this new reality, and for an Angular application there is no such a thing like "root" route. You simply transition between routes and the framework does the rest of the work.
this.navCtrl.navigateRoot('/DrivernumberComponent');
In your case you need to redirect route to your root that you want to move i.e. "DrivernumberComponent"
I would like to create an application which shows a custom component in ApplicationB which is created in ApplicationA (like we maintain UI projects in C#.NET). It's like allowing the ApplicationB to consume the generic component screen from ApplicationA and modify its contents before rendering the screen (say Title for instance). I could create custom components but was unable to reference it to new project for use, and also wonder how to handle click events for the controls created in custom component for which they should have implemented some event subscription mechanism.
I am using the below URL to create custom components:
https://developer.blackberry.com/cascades/documentation/ui/custom_components/custom_components_tutorial.html
But the above tutorial doesnt show how to bind events from parent to custom component.
The closest thing to what you describe in Cascades are Cards. However it doesn't sound like this is what you want. If you can implement your UI elements entirely in QML, and place them in a shared directory ApplicationB could import the elements and use them. If you implement in C++ you could create a library (either static or dynamic) and link ApplicationB to the library.