Ionic/Angular - Multiple routes not working

Question

I have an Ionic project setup using the tabs template. Here is my issue: I have an Activity tab that will have 3 buttons on the page:

• Friends
• Near Me

Answer 1

I'm not an Ionic developer, but in a basic Angular application it would make more sense to define the friends, nearme and global routes as child routes, not named secondary routes.

This code:

<ion-content>
  <ion-router-outlet name="friends"></ion-router-outlet>
  <ion-router-outlet name="nearme"></ion-router-outlet>
  <ion-router-outlet name="global"></ion-router-outlet>
</ion-content>

Is telling Angular to build a "dashboard" type display with all three components possibly showing at the same time.

If you only want to show friends OR nearme OR global, use child routes instead.

This code defines one router outlet that you can route any of the content to.

<ion-content>
  <ion-router-outlet></ion-router-outlet>
</ion-content>

And change the route definitions to remove the outlet name:

    children: [
      {
        path: 'friends',
        component: FriendsComponent
      },
      {
        path: 'nearme',
        component: NearMeComponent
      },
      {
        path: 'global',
        component: GlobalComponent
      }
    ]