load a page outside the router-outlet in angular 4

Question

I am working on a angular 4 application and I want load login.page.ts outside of the router-outlet

this is my home.component.html file

<div class="container">
   <top-nav-bar></top-nav-bar>
   <lett-nav-bar></lett-nav-bar>
   <router-outlet></router-outlet>
</div>

routes configs

const MAINMENU_ROUTES: Routes = [
    { path: 'login', component: LoginComponent },
    { path: '', redirectTo: 'home', pathMatch: 'full'},
    { path: 'home', component: HomeComponent, canActivate: [AuthGuard]}
];

with this, I can load login page inside the router but I want to load login page in full screen before coming to the router-outlet.

Answer 1

You cannot route to a page without a router outlet. Based on what you are describing, it sounds like you need another router outlet at a higher level, say in an App Component. Something like this:

<div class="container">
   <router-outlet></router-outlet>
</div>

Then you can route the login page and the home component into this router outlet.

Your route configuration would then look something like this:

    { path: 'login', component: LoginComponent },
    { path: 'home', component: HomeComponent, canActivate: [AuthGuard], 
      children: [
       { path: 'child1', component: Child1Component },
       { path: 'child2', component: Child2Component }
      ]
    }

The login and home routes would then appear in the App Component's router outlet, so the login page would be shown full screen with no nav bars. And the child1 and child2 routes would appear in the Home Component's router outlet.

Answer 2

DeborahK answer is the recommended solution, but there is a way to avoid having another router outlet by using a query parameter that is recognized in App Component which can react and have some elements (header, footer) disappear.

app.component.html

<app-nav-menu [hidden]="hasFullView"></app-nav-menu>
<div class="{{!hasFullView ? 'body-container' : ''}}">
  <router-outlet></router-outlet>
</div>
<app-footer [hidden]="hasFullView"></app-footer>

app.component.ts

hasFullView = false;

private setHasFullView() {
    this.activatedRoute.queryParams.subscribe(params => {
        this.hasFullView = params["hasFullView"] || false;
    });
}

ngOnInit() {
  this.setHasFullView();
}

usage example

showPrintView() {
  const url = `module/user-edit-printout/${userId}?hasFullView=true`;
  window.open(url);
}