Angular 2: Have Child Route Component Replace Parent in router-outlet

Question

Is there a way to display a child route in the parent route\'s ?

For example, let\'s say we have two routes:

/users         


        

Answer 1

If you need to hide something (like a datagrid, or instruction panel) based upon a child route being active you can simply use this:

   Please select a child route!

It is important to include #outlet="outlet" with the quotes because you're exporting a template variable reference.

There are also events on router-outlet for activation and deactivation.

An alternative is to get the child route when the NavigationEnd event occurs, and then make decisions what to show or hide. For simpler cases the first approach should work fine.

Also not relevant to your question I don't think, but you can completely hide a router-outlet with an *ngIf as you would anything else.