I am using Ionic 2 and angular 2 for application development . I created popup using ionic-angular modal.I need navigation from popup to other page using ionic navigation( push ) method. But 'its not working on my end. The next page is loading in same component.
My code
For opening popup
openModal() {
let myModal = this.modalCtrl.create(CreateModal);
myModal.present();
}
this function will open the popup. In popup html i have on click function.
<h2 (click)="goTonext()" data-dismiss="create-modal" >Next page</h2>
The click function
goTonext() {
this.viewCtrl.dismiss();
this.navctrl.push(NextPage
, {
id: res.status
}
);
}
this function will close the popup and loading the next page in same page.
It's not loading next page separately.
Please help!!!
When you are calling this.view.dismiss() it is closing the modal.
If you want to do some action after dismiss, you can do it in onDidDismiss() of the modal.
In your original component,
openModal() {
let myModal = this.modalCtrl.create(CreateModal);
myModal.onDidDismiss(data=>{
if(data){
this.navctrl.push(NextPage
, {
id: data.status
}
}
);
});
myModal.present();
}
Send the res in dismiss function call.
this.viewCtrl.dismiss(res);
Related
I am new to ionic framework and I am unable to manage hardware back click functionality in Iframe. I am using Iframe to load certain url. While clicking the hardware back button I should be able to navigate back to the browser history page. But whenever I click hardware back its exiting the app.
`<iframe #iframe id="iframe" style="height: 100%;width: 100%;" src="your url"></iframe>`
#ViewChild('iframe') iframe:ElementRef;
constructor(public platform:Platform,public nav:Nav){
platform.registerBackButtonAction(() => {
if(this.nav.canGoBack()){
this.iframe.nativeElement.contentWindow.history().back();
}
});
}
You can use window.history.back():
ionViewDidLoad() {
this.navBar.backButtonClick = (e: UIEvent) => {
window.history.back();
}
this.initializeBackButtonCustomHandler();
}
ionViewWillLeave() {
// Unregister the custom back button action for this page
this.unregisterBackButtonAction && this.unregisterBackButtonAction();
}
initializeBackButtonCustomHandler(): void {
this.unregisterBackButtonAction = this.platform.registerBackButtonAction(function(event){
window.history.back();
}, 101); // Priority 101 will override back button handling (we set in app.component.ts) as it is bigger then priority 100 configured in app.component.ts file */
}
More info about this method can be found here.
I use SWRevealViewController for my project. My problem is that I can click on the SWRevealView Toggle button at first time and that button does not work after I click on Back button from another view controller and back to that view. Here is the screenshot of my project.
I click on NavigationLeft button from Service View Controller at first and left menu shows up. After that, I click on "Imageview" from that view controller to go to next page.
When I reached to detailed next page, I click on "Back button" and it goes to Service view controller.
At that time , I click on RevealView Toggle button , it does not work. I got error fatal error: unexpectedly found nil while unwrapping an Optional value.
My codes from Service View Controllers are;
override func viewDidLoad() {
super.viewDidLoad()
if self.revealViewController() != nil {
debugPrint("Menu Click")
btnBack.target = self.revealViewController()
btnBack.action = #selector(SWRevealViewController.revealToggle(_:))
self.revealViewController().panGestureRecognizer()
}
else
{
debugPrint("nil")
btnBack.target = self.revealViewController()
btnBack.action = #selector(SWRevealViewController.revealToggle(_:))
// self.view.addGestureRecognizer(self.revealViewController().panGestureRecognizer())
self.revealViewController().panGestureRecognizer()
}
}
When the project runs first time, the code passes to "self.revealViewController() != nil" and I go to detailed view controller and click on Back button. At that time the code passes to " debugPrint("nil")" and it does not show up menu or work.
Codes from Detailed view controller are;
#IBAction func btnBack(_ sender: UIBarButtonItem) {
debugPrint("BtnBack")
self.dismiss(animated: true, completion:nil)
}
Is my code is something wrong or logic wrong ? I have been trying to solve this problem since one week. Please help me ..
On click event of image view in serviceViewController,
let detailVC = self.storyboard?.instantiateViewController(withIdentifier: "Detail") as! DetailVc
self.navigationController?.pushViewController(detailVC, animated: true)
Attach a navigation controller to detail viewcontroller. No need for manual connection between service and detail.
Add a barbutton for goingback event.
self.navigationController?.popViewController(animated: true)
Also add self.view.addGestureRecognizer(self.revealViewController().panGestureRecognizer()) instead of ur code in the lastline of adding target for menubutton.
Check whether this works.
I have a component which is my main interface. Inside this component, clicking a button opens ionic 2 modal which allows to choose items.
My modal page (itemsPage):
..list of items here
<button ion-button [disabled]="!MY_TURN || !selectedItem || !selectedItem.quantity"
(click)="useItem(selectedItem)">
<span>Choose item {{selectedItem?.name}}</span>
</button>
useItem() should:
Send item data to my main interface component
Close the modal
Execute a method in my main interface
How I can perform such actions? Couldn't find any documentation about communicating between modal and component in Ionic 2.
It is simply a matter of using parameters in viewController.
In your main interface component,
let chooseModal = this.modalCtrl.create(itemsPage);
chooseModal.onDidDismiss(data => {
console.log(data);
});
chooseModal.present();
In your modal page,
useItem(item) {
this.viewCtrl.dismiss(item);
}
Modal Controller link here
This is a clear example of getting data from modals in ionic.
You need to add a handler for modal’s onDismiss() and then return the data from the modal itself by passing the data to the ViewController’s dismiss() method:
// myPage.ts
// Passing data to the modal:
let modal = Modal.create(myModal, { data: [...] });
// Getting data from the modal:
modal.onDismiss(data => {
console.log('MODAL DATA', data);
});
this.nav.present(modal);
on the modal page
// myModal.ts
constructor(private navParams: NavParams, private viewCtrl: ViewController) {
// Getting data from the page:
var dataFromPage = navParams.get('data');
}
dismiss() {
// Returning data from the modal:
this.viewCtrl.dismiss(
// Whatever should be returned, e.g. a variable name:
// { name : this.name }
);
}
I have an ionic2 application with angular2, at one page I inject LoadingController and make use of it, at different location on my app.ts I catch all global http errors and want to display alert so I inject AlertController there .
So having 2 location which can at some point call a modal dialog creation and present it causing a problem that freezes the screen , I believe it is because there are 2 modals being open one on the other.
Is there any chance I can grab the current dialog and close it, or add param to create which closes any background modal ?
This is my code:
export class SandboxPage implements OnInit {
private _loadingModel;
constructor(private _navCtrl:NavController, private _alertCtrl:AlertController , private _loadingCtrl: LoadingController ) {
}
ngOnInit() {
this._loadingModel = this._loadingCtrl.create();
this._loadingModel.present();
let alert = this._alertCtrl.create({
title: 'Error',
message:"error message",
buttons: [{
text: 'Ok',
handler: () => {
// user has clicked the alert button
// begin the alert's dismiss transition
let navTransition = alert.dismiss();
}
}]
});
//timeout the error to let other modals finish dismissing.
setTimeout(()=>{
alert.present();
},500);
}
}
The ok click want close the alert model, Here in this example it's on the same page so I can dismiss the loading but when on different components it's not possible to do.
Trying to navigate from the starting page (i'm using a side menu rather than tabs).
The navigation seems to work, but only after pressing the button twice (the old pages does not leave the DOM, but the new pages constructor fires, and replaces the header to the page. I can then press the navigate button again, which re-runs it's page logic and renders the rest of the page. I've attached some screenshots:
This is the main login:
After pressing the button to login, the next pages logic runs, and the header changes. But the old page doesn't leave.
I can press login again, the next pages logic runs again then it renders the page.
Here's the code:
login(){
this.refToProgram.loggedIn = true;
this.nav.push(NearmePage).then(
response => {
console.log('Response ' + response);
},
error => {
console.log('Error: ' + error);
}
).catch(exception => {
console.log('Exception ' + exception);
});
}
The result of this is: 'Response true'
Which means ionic thinks the navigation was successful, what am I missing?
try to navigate with [navPush]= "nearmePage"; Inside the login button
Inside your controller
Insert the nearmePage class and the inside your LoginPage class
declare nearmePage = "NearmePage" so that will take to the respected page form login page