Skip to content

Latest commit

 

History

History
56 lines (45 loc) · 1.08 KB

empty-component.md

File metadata and controls

56 lines (45 loc) · 1.08 KB

Empty Component

There is a tradeoff that I had to do between ionic-router-outlet and router-outlet

ionic-router-outlet

  • provides animations and gestures
  • show the back button
  • Ionic's lifecycle hooks
  • Close root page on back button

router-outlet

  • provides animations and gestures
  • show the back button
  • Ionic's lifecycle hooks
  • Close root page on back button

Hence, I chose to use ion-router-outlet.

Usage

Add EmptyComponent as a sibling route to your child page, if the children, doesn't redirect to a default path. This will also allow you to use the back button on the root page.

children: [
  {
    path: '',
    component: EmptyComponent
  },
  {
    path: "child",
    component: MyChildPageComponent
  }
]

Custom Empty Component

You could pass in your own empty component to the umn-page component.

children: [
  {
    path: '',
    component: MyEmptyComponent
  },
  {
    path: "child",
    component: MyChildPageComponent
  }
]
<umn-page emptyComponentClassName="MyEmptyComponent">
</umn-page>