diff --git a/core/src/components/router-outlet/readme.md b/core/src/components/router-outlet/readme.md index 15d0cedcd9..7cd0b0b5b2 100644 --- a/core/src/components/router-outlet/readme.md +++ b/core/src/components/router-outlet/readme.md @@ -1,11 +1,30 @@ # ion-router-outlet -RouterOutlet is a component used in routing within an Angular app. RouterOutlet behaves the same way as Angular's built-in RouterOutlet component, but contains the logic needed for animating views in and out. +Router Outlet is a component used in routing within an Angular app. +Router Outlet behaves in a similar way as Angular's built-in Router Outlet component, but contains the logic for providing a stacked navigation, and animating views in and out. > Note: this is only meant for Angular projects. For vanilla JavaScript, use `ion-router` and `ion-route` instead. -While RouterOutlet has methods for navigating around, it's recommended to use the navigation methods in Angular's router. +While Router Outlet has methods for navigating around, it's recommended to use the navigation methods in Angular's router. + + +### Life Cycle Hooks + +Routes rendered in a Router Outlet have access to specific Ionic events that are wired up to animations + + +| Event Name | Trigger | +|--------------------|------------------------------------------------------------------| +| `ionViewWillEnter` | Fired when the component being routed to is about to animate in. | +| `ionViewDidEnter` | Fired when the component being routed to has animated in. | +| `ionViewWillLeave` | Fired when the component being routed from is about to animate. | +| `ionViewDidLeave` | Fired when the component being routed from has animated. | + + +These event tie into Ionic's animation system and can be used to coordinate parts of your app when a Components is done with it's animation. These events are not a replacement for Angular's own event system, but an addition. + +For handling Router Guards, the older `ionViewCanEnter` and `ionViewCanLeave` have been replaced with their framework specific equivalent. For Angular, there are [Router Guards](https://angular.io/guide/router#milestone-5-route-guards).