Routes for Auth Pages without layout Angular 4

Question

I would like to hide my layout on my login/register pages, but I'm not sure how to do it properly. I don't want to use an overlay on those pages to cover the layout, and I don't think it should be done by asking what route it is and hiding the elements if certain route is hit.

My layout component:

<div class="body-wrapper">
  <div class="content">
    <app-header></app-header>
    <router-outlet></router-outlet>
  </div>
</div>

So, I need my router outlet to display only login component and not the other html.

I'm not sure what you mean by "layout". Are you referring to the <app-header>? Or something else? — DeborahK

DeborahK DeborahK · Accepted Answer · 2017-06-09T14:36:04

You then need to build a simpler main page with none of the layout, only a <router-outlet>.

Then you can route to the login page and no extra layout will appear.

Then you can navigate to another route that displays the more detailed layout, with and such and includes another . All other routes can then be child routes of this route so they'll appear within the detailed layout.

Make sense?

So AppComponent:

<div class="body-wrapper">
    <router-outlet></router-outlet>
</div>

The Login and Main components would be routed to this router outlet.

And MainComponent:

<div class="body-wrapper">
  <div class="content">
    <app-header></app-header>
    <router-outlet></router-outlet>
  </div>
</div>

All other components would be children of the MainComponent and routed to this router outlet.

Routes for Auth Pages without layout Angular 4

1 Answers