James Runner James Runner - 3 months ago 22
Javascript Question

Ionic2 - Show/Hide button based on how the controller was shown

I have a page

which needs to be open sometimes using a
and sometimes using a

In the normal scenario, if the controller is opened using a push method it will show a "Back" button. However, in the other scenario which is opening the page using a
method, I need to add a close button to
so the user can dismiss that controller at any time.

The Problem

If I add a close button to
then that button shows even if the controller was opened using a
method and in this case it shows a back button and a close button.

What I want

I want to add a condition, in which if the controller was opened using
, then it should hide that close button

The flow:

Page 1 > (Push to) > Page 2 (Hide the close button)

Page 3 > (Modal to) > Page 2 (Show the close button)

Any idea on how to achieve that?


You could send a parameter to the Page2 constructor, something like this:

presentPage2AsModal() {
   let page2Modal = this.modalCtrl.create(Page2, { showCloseBtn: true });

And if you open it with the push method:

openPage2AsPage() {
   this.nav.push(Page2, { showCloseBtn: false });

And then in the Page2 constructor:

constructor(..., private navParams: NavParams) {
    // Get the param
    this.showCloseBtn = navParams.get('showCloseBtn');

And in the View:

<button *ngIf="showCloseBtn" (click)="yourMethod">Close</button>