Page is presented modally instead of forward-pushed


#1

Hi

I have a tabs setup. Inside of one of the views, I want to push a new view, normally using a simple method:

//Goes to StationPage
  public openStation(station) {
    this.navCtrl.push(StationPage, {
      'station': JSON.stringify(station)
      });
  }

The thing is, the view is not presented in a pushed-forward way, it is presented modally. This causes also that the back button works as a ‘close’ button, instead of a back-push.

I’ve tried using the opts:

//Goes to StationPage
  public openStation(station) {
    this.navCtrl.push(StationPage, {
      'station': JSON.stringify(station)
      }, { animate: true, direction: 'forward'});
  }

But it didn’t worked. I really want the view to be presented as a push, not modally.

Thanks


#2

Any tips on this? To add further information, the main view is a side menu, followed by tabs. Each tab can have inner views.


#3

Please paste your code here.


#4

Which part are you interested? I put some code in the OP.


#5

StationPage (20 characters)


#6
import { Component } from '@angular/core';
import { IonicPage,
         NavController, NavParams,
         Loading, LoadingController } from 'ionic-angular';

import { Station, StationsProvider } from '../../providers/stations/stations';


@IonicPage({
  segment: 'station/:station'
})
@Component({
  selector: 'page-station',
  templateUrl: 'station.html',
})
export class StationPage {

  station: Station = <Station>{};

  constructor(public navCtrl: NavController, public navParams: NavParams, private loadingCtrl: LoadingController, private stationsService: StationsProvider,  ...) {}
}

There is no much thing there.


#7

Could you try it?

public openStation(station) {
    this.navCtrl.push(StationPage);
  }

And if not, try with another basic component. Like just a <h1> Hello world </h1>
Also show me the entier ts file where OpenStation is defined please (the constructor and import)


#8

I’ve tried your solution, and it presented the StationPage forward. When I add the parameters, it opens it modally. Why does this happen ?


#9

Try to set custom param like :

this.navCtrl.push(StationPage, 
{
      'station': "TESTARG"
})

#10

Actually, I did this:

public openStation(station) : void {
    this.navCtrl.push('StationPage', 
      {
        'station': JSON.stringify(station)
      }, 
      { 
        direction: 'forward'
      }
    );
  }

I dont know what is the real difference, since ‘animate’ is true by default. Now I have my view forwardly presented.

Thanks you for your time.


#11

I’m sorry to bring this up again, but I’ve discovered that this issue is only related to Android Material Design Styles (and web browser, since the both get the same styles). In IOS, the default animation is correct (forward and back). But in Android, they are presented as a modal.

I’m doing this to fix that:

this.navCtrl.push('Page', {}, 
       { animate: true, 
         animation: 'transition', 
         direction: 'forward' 
      });

And this forces me to do the same on the ‘Page’, but with pop, overriding the back button:

ionViewDidLoad() {
    this.navBar.backButtonClick = (e: UIEvent) => {
      this.navCtrl.pop({animate: true, animation: 'transition', direction: 'back'});
    }
}

I find this terrible. Why should I override all back buttons in my app just to get this work correctly? Where can I define transition by default for android/material design ?


#12

Anyone has any idea how to set this transition effect to all app without overrinding all back buttons and without writing it explicity ?


#13

I’m rather confused as to what your original issue is, but you should be able to use Config and specify the pageTransition.

I’m not sure how the animation changes the behavior of the button though.


#14

My issue is that pages are presented Modally on Android (like when you use a modalCtrl.present(modal)). My desire is to show them how it should be: a transition right-to-left or left-to-right (depending if it is forward or backwards).

Having to change every .push() call and every .pop() call seems unnecesary, since they work as they should in iOS.


#15

“how it should be” at least in terms of iOS. The default for android is how it’s transitioning now.

You can set the aforementioned pageTransition to 'ios-transition' to get ios page transitions.


#16

OMG That was exactly was I was looking for.

I thought that transitions were meant to be like in ios. That was my error. But you gave me what I was looking for. I really appreciate it. Thanks!