load a page outside the router-outlet in angular 4

user_4361584 0
Viewed 7094

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.

angular typescript javascript
2 Answers

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);
}
user_27807910
Related