# Ion-router-outlet in modal does not work (ionic 5 angular 12)

**URL:** <https://forum.ionicframework.com/t/ion-router-outlet-in-modal-does-not-work-ionic-5-angular-12/216596>\
**Category:** Ionic Angular\
**Created:** [October 26, 2021, 9:08am UTC](https://forum.ionicframework.com/t/ion-router-outlet-in-modal-does-not-work-ionic-5-angular-12/216596 "2021-10-26T09:08:59Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![cmouze](https://avatars.discourse-cdn.com/v4/letter/c/7feea3/32.png) [@cmouze](https://forum.ionicframework.com/u/cmouze)\
**Post date:** [October 26, 2021, 9:08am UTC](https://forum.ionicframework.com/t/ion-router-outlet-in-modal-does-not-work-ionic-5-angular-12/216596/1 "2021-10-26T09:08:59Z")

</div>

In tabs application, I display a modal and I would like to use ion-router-outlet to display ‘subviews’.  
This is my github repo to reproduce the issue:

> **[GitHub - cmouze/RouterInModalInTabs](https://github.com/cmouze/RouterInModalInTabs)**
>
> Contribute to cmouze/RouterInModalInTabs development by creating an account on GitHub.

Some sample of code here:

```auto
<ion-header>
  
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="dismiss()">Cancel</ion-button>
    </ion-buttons>
    <ion-title>test-modal</ion-title>
  </ion-toolbar>

  <ion-toolbar>
    <ion-button [routerLink]="subview1">Subview 1</ion-button>
    <ion-button routerLink="subview2">Subview 2</ion-button>
    <ion-button routerLink="subview3">Subview 3</ion-button>
    <ion-button routerLink="['', {outlets:{subviews:'subview1' } }]">subviews:Subview 1</ion-button>
  </ion-toolbar>

</ion-header>

<ion-content>
  <ion-router-outlet name="subviews"></ion-router-outlet>
</ion-content>

```

```auto
const routes: Routes = [
  {
    path: '',
    component: TestModalPage,
    children: [
      {
        path:'subview1',
        component:Subview1Page,
        outlet:'subviews'
      },
      {
        path:'subview2',
        component:Subview2Page,
        outlet:'subviews'
      },
      {
        path:'subview3',
        component:Subview3Page,
        outlet:'subviews'
      }
    ]
  }
];

```

```auto
async openModal() {
    const modal = await this.modalCtrl.create({
      component: TestModalPage,
      swipeToClose: true,
      showBackdrop: true,
      // cssClass: 'cssResourceModal',
      presentingElement: this.routerOutlet.nativeEl,
      componentProps: { mode: 'test' }
    });
    await modal.present();

    const { data } = await modal.onWillDismiss();
    if (data) {
    }

```

What is wrong ?

---

<div class="post-metadata">

**Author:** ![EinfachHans](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/einfachhans/32/130917_2.png) [@EinfachHans](https://forum.ionicframework.com/u/EinfachHans)\
**Post date:** [October 26, 2021, 10:59am UTC](https://forum.ionicframework.com/t/ion-router-outlet-in-modal-does-not-work-ionic-5-angular-12/216596/2 "2021-10-26T10:59:50Z")

</div>

AS far as i know you can not use `ion-router-outlet` in a Modal 🤔 For navigating inside a Modal i normally use [ion-nav](https://ionicframework.com/docs/api/nav).

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [October 26, 2021, 3:38pm UTC](https://forum.ionicframework.com/t/ion-router-outlet-in-modal-does-not-work-ionic-5-angular-12/216596/3 "2021-10-26T15:38:00Z")

</div>

@EinfachHans Is correct here, router outlet is **only** for top-level navigation. Not for sub-navigation in a modal.

---

<div class="post-metadata">

**Author:** ![cmouze](https://avatars.discourse-cdn.com/v4/letter/c/7feea3/32.png) [@cmouze](https://forum.ionicframework.com/u/cmouze)\
**Post date:** [October 26, 2021, 3:45pm UTC](https://forum.ionicframework.com/t/ion-router-outlet-in-modal-does-not-work-ionic-5-angular-12/216596/4 "2021-10-26T15:45:37Z")

</div>

Thx EinfachHans and mhartington, I will try to implement ion-nav.

---

<div class="post-metadata">

**Author:** ![cmouze](https://avatars.discourse-cdn.com/v4/letter/c/7feea3/32.png) [@cmouze](https://forum.ionicframework.com/u/cmouze)\
**Post date:** [October 27, 2021, 6:30am UTC](https://forum.ionicframework.com/t/ion-router-outlet-in-modal-does-not-work-ionic-5-angular-12/216596/5 "2021-10-27T06:30:17Z")

</div>

I have use ion-nav and it works now. 😄  
I publish the working version on github for anyone needs an example.  
Thank you for your support!