Using ion-nav-push/pop in ionic 4 Modal

Question

1. I already know Ionic 4 uses Angular router for navigation
2. I'm asking about sub navigation in modals (as recommended by ionic 4 docs https://ionicframework.com/docs/api/nav#properties)

How do I implement this properly? (on Ionic4/Angular project for ios/android)

I was able to get one component to come into view..

So I open my modal and pass the root component to it that contains...

<ion-nav [root]="rootPage"></ion-nav>

Here rootPage is a variable set an actual component lets call it ListViewComponent...

I then have each list item surrounded like this...

<ion-nav-push [component]="profile"> <ion-item detail>Personal Information</ion-item> </ion-nav-push>

This pushes another component into view the ProfileComponent ...and it works.

The problem I have is trying to push another component from ProfileComponent ...I have another item surround by the ion-nav-push tags ...but the "nothing" happens ...no errors no push nothing... am I crazy, can ion-nav only navigate 1-d, or is my set up not correct ...any advice would help. Again I'm trying to do very, basic, simple navigation within a model per ionic4's doc. Thanks.

Answer 1

Hi I've just encountered the same issue. I did solve it by access the ion-nav with document.getElementId directly.

@Component({
    selector: 'some-cmp',
    template: `
        <ion-nav [root]="root" [rootParams]="rootParams" id="some-cmp-id" [animation]="animationFn"></ion-nav>
    `,
})

Then you can use your Sub Pages

private nav: IonNav = document.getElementById('some-cmp-id') as any;

onConfirmConsumedAll() {
        this.nav.push(OtherCmp, { props });
}

Answer 2

<ion-nav> clearly misses documentation right now, I needed it to do navigation in a modal, without affecting Angular Routing. Here's how I implemented it :

MyModal.component.ts

@Component({
  selector: "my-modal",
  templateUrl: "./my-modal.component.html",
  styleUrls: ["./my-modal.component.scss"]
})
export class MyModalComponent implements OnInit {
  @ViewChild("nav", { static: true }) nav: IonNav;

  ngOnInit(): void {
    this.nav.setRoot(MyFirstPage, { nav: this.nav }); // MyFirstPage is a class of an Angular component
  }
}

my-modal.component.html

<ion-nav #nav></ion-nav>

MyFirstPage.component.ts

@Component({
  selector: "my-first-page",
  templateUrl: "./my-first-page.component.html",
  styleUrls: ["./my-first-page.component.scss"]
})
export class MyFirstPageComponent {
  @Input() nav: IonNav;

  navigate(): void {
    this.nav.push(MySecondPage); // MySecondPage is a class of an Angular component
  }
}

my-first-page.component.html

<ion-button (click)="navigate()"></ion-button>

MySecondPage.component.ts

@Component({
  selector: "my-second-page",
  templateUrl: "./my-second-page.component.html",
  styleUrls: ["./my-second-page.component.scss"]
})
export class MySecondPageComponent implements OnInit {
  constructor() {}

  ngOnInit() {
    // stuff
  }
}

my-second-page.component.html

<div>hello from second page</div>