Angular2 equivalent to template inheritance

Question

In my angular2 app I have the AppModule, the AppComponent (only consists of router-outlet) and a LoginComponent:

<form><input type="password"></form>

... and a list with documents (DocumentsComponent):

<nav>...</nav>
<ul>
 <li>Document A</li>
 <li>Document B</li>
 <li>Document C</li>
</ul>

... and a list with users (UsersComponent):

<nav>...</nav>
<ul>
 <li>User A</li>
 <li>User B</li>
 <li>User C</li>
</ul>

The login should be in fullscreen. So there is no navigation. On all other components there should be a navigation. So in the real app it's not only the navigation. There are a lot more components around the content.

In Twig I would use something like extend. But I know that the structure and idea of templating in Angular is different.

So where should I put the "wrapper" (navigation, footer, ...) and show it in the Documents- and UsersComponent but not in LoginComponent, RegisterComponent, ErrorComponent,....?

Answer 1

use child routes

or if your user is not logged in, just put login form in front of app with position fixed to hide everything from user - this is easy but kind of dirty solution

you can also use hierarchical di to place some component where you want

or Compile your component in dynamic way but this is the worst scenario here