router-outlet directive

Acts as a placeholder that Angular dynamically fills based on the current router state.

<router-outlet></router-outlet>
<router-outlet name='left'></router-outlet>
<router-outlet name='right'></router-outlet>

A router outlet will emit an activate event any time a new component is being instantiated, and a deactivate event when it is being destroyed.

<router-outlet
  (activate)='onActivate($event)'
  (deactivate)='onDeactivate($event)'></router-outlet>
Tutorials