Angular 4 routing - is it possible to have two router components

Question

So, i'm using angular 4 to develop an app, and i have a problem. I want to use angular 4 routing to include two components in one page, but it doesn't seem to be doable in the way i want to do it. I have a component header which is just a navbar, and i have another component home, which already has a navbar so i don't want to include header with home, but with some other component login for example. So i tried looking at angular docs and the closest way to do this would be with childs, but i don't want login to be a child of header. I tried putting to router-outlets and two components in my app.module.ts file, but it didn't work out.

Answer 1

Your main component could be displayed in the default router outlet and the second component could be displayed in a secondary, named router outlet like this:

<div class="container">
    <div class="row">
        <div class="col-md-10">
            <router-outlet></router-outlet>
        </div>
        <div class="col-md-2">
            <router-outlet name="popup"></router-outlet>
        </div>
    </div>
</div>

You can then route to the secondary route like this:

this.router.navigate([{outlets: { popup: ['messages']}}]);

You can see a complete example here: https://github.com/DeborahK/Angular-Routing