In Ionic 3, I'm trying to open a modal from within a side menu:
<ion-item menuClose (click)="presentProductModal()"> Add Product</ion-item>
When the side menu is opened, the rest of the screen loses focus. When the modal link is selected, the side menu disappears. However, the modal and the main screen remain unfocused.
I'm guessing there's some timing / promise issue here, but I'm not sure what to do exactly.
Is there some workaround?
Here are two images demonstrating the issue (the "Add Product" link opens the modal):
Thanks in advance!
You can use the menu output event: ion-close.
Listen for this event, and open the modal after menu has closed.
Read more about output events for menu here: menu close event
or
Remove menuClose directive from ion-item. In your click function, close the menu programmatically using close method. Read more about it here: Close menu programmatically.
This method will return a promise which will be resolved when menu is fully closed, you can then open the modal in its resolve.
this.menuController.close(<your menu id>).then(() => {
this.modal.create.....
})
The template for the modal was simply missing wrapping tags.
you can use MenuController
import { MenuController } from 'ionic-angular';
constructor(public menuCtrl: MenuController) {
}
If you want to close menu please use close() event
this.menuCtrl.close()
If you want to open menu please use open() event
this.menuCtrl.open();
Related
Is there any way or any framework or any particular ionic component to implement this below kind of feature.
Here is what I want:
When I open the component for first time the pop over automatically appears over a button ( like we have page tour in websites ). On click on GOT IT it will dismiss.
Use the popover component (https://ionicframework.com/docs/api/popover) with
ionViewDidEnter(){ }
As the popover is most of the time triggered by a click, you'll need to use javascript to "fake" a click :
ionViewDidEnter(){
let element: HTMLElement = document.getElementById('button') as HTMLElement;
element.click();
}
And then you create your onClick() method for your button to present the popover.
I need to develop a functionality in IBM Content Navigator where after search for an item, right click it-> Properties, I need to either:
1 - add a button in properties dialog screen that will call a service and open another dialog;
2 - or extend the Save button functionality to also call a service and open another dialog;
What's quickest way to achieve that ?
Have a look # ecm.widget.dialog.EditPropertiesDialog and onSave() method. This might help you to extend save button functionality.
You can add your customized code by using aspect before/after:
(choose either depending on your functionality)
aspect.after(ecm.widget.dialog.EditPropertiesDialog.prototype,"onSave", function(event){
......
});
aspect.before(ecm.widget.dialog.EditPropertiesDialog.prototype,"onSave", function(event){
......
});
Having some trouble opening a Dialog after navigating to a page. The intention is to always open the dialog when a user lands on this page.
Simplified, I have a controller that looks like this:
onInit: function() {}
this.myRouter.getRoute("orderscreate").attachPatternMatched(this._onObjectMatched, this);
},
_onObjectMatched: function() {
this.dialog = sap.ui.xmlfragment("myDialog", this);
this.dialog.open();
},
When I put a debugger in, this works great: I can see the dialog is open.
THEN, the navigation animation kicks in, does the slide animation, and upon completion the dialog is closed again. I'm not sure why it insist on navigating after the view has rendered.
This happens when using navTo as well. Dialog opens, animation starts, dialog is closed again. sap.m.Page does not have another way of executing code after showing, as far as I'm aware.
Any advice?
Unless told otherwise the TargetHandler will close all open dialogs.
TargetHandler, a class used for closing dialogs and showing transitions in NavContainers when targets are displayed.
Try adding the following code after your router has been initialized
this.myRouter.getTargetHandler().setCloseDialogs(false);
I am using cordova-google-maps plugin with my ionic 2 app, and I want to show the menu (sidenav) on that page. Problem is for the sidenav to receive events properly I need to call map.setClickable( false ) while opening the sidenav and set it back to true when the user closes the sidenav. It seems there is an event for checking while the menu is being opened with opening, but I don't know how to track when the user closes the menu.
For using ionDrag, ionOpen, ionClose in Ionic2 you must add it on the menu itself
for example modify menu in your app.html file by
<ion-menu [content]="content" (ionOpen)="menuOpened()" (ionClose)="menuClosed()">
After I use "Events" see doc here: http://ionicframework.com/docs/v2/api/util/Events/
For detect in my page if the menu was close or open.
Example in my app.ts
menuClosed() {
this.events.publish('menu:closed', '');
}
menuOpened() {
this.events.publish('menu:opened', '');
}
And in my other page
events.subscribe('menu:opened', () => {
// your action here
});
events.subscribe('menu:closed', () => {
// your action here
});
I hope this help
It seems new events have been added to the menu component which solves this problem. I am also using the google maps plugin and it works fine
http://ionicframework.com/docs/v2/api/components/menu/Menu/
ionDrag
When the menu is being dragged open.
ionOpen
When the menu has been opened.
ionClose
When the menu has been closed.
Using these output events, in your handlers you can keep a flag for the menu if its open or not :)
How do I reload the content sitting under <ion-content> tag when back button is pressed?
The answer which is there is correct, however, it is outdated. Here is the updated answer.
Link to the Life Cycle just scroll down and you should see it.
Example:
ionViewWillEnter() {
console.log('Runs when the page is about to enter and become the active page.');
}
Just use a View Lifecycle Hook in the view you are going back you have to use for example:
onPageWillEnter() {
// You can execute what you want here and it will be executed right before you enter the view
}
Or you use a lifecycle hook on the page you are leaving then just replace onPageWillEnter() with onPageWillLeave()
With ionic beta 8 the lifecylcle events changed their names. Check out the official ionic blog for the full list of the lifecycle events.