How to display a page outside the router-outlet in angular 4

Question

How to display a page outside the router-outlet in angular 4

I'm currently developing an angular 4 application and I am trying to figure out how to load the login.page.ts outside of the router-outlet

This is what my home.component.html file looks like:

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

Here are my routes configurations:

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

Although with this setup, I can load the login page inside the router-outlet, what I actually want is to have the login page displayed in full screen before moving on to the router-outlet.

javascript angular typescript

Answer 1

Answer №1

In order to navigate to a page, you must have a router outlet in place. It seems like you may need another router outlet at a higher level, such as in an App Component. Consider implementing something like the following:

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

From there, you can direct the login page and home component to this router outlet.

Your route setup might resemble this configuration:

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

The login and home routes will then display within the App Component's router outlet, allowing the login page to appear full screen with no navigation bars. The child1 and child2 routes will be visible within the Home Component's router outlet.

Answer 2

In order to navigate to a page, you must have a router outlet in place. It seems like you may need another router outlet at a higher level, such as in an App Component. Consider implementing something like the following:

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

From there, you can direct the login page and home component to this router outlet.

Your route setup might resemble this configuration:

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

The login and home routes will then display within the App Component's router outlet, allowing the login page to appear full screen with no navigation bars. The child1 and child2 routes will be visible within the Home Component's router outlet.

Answer 3

Answer №2

DeborahK provides the suggested solution, which involves utilizing a query parameter in the App Component to manage elements such as the header and footer without the need for an additional router outlet.

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

Answer 4

DeborahK provides the suggested solution, which involves utilizing a query parameter in the App Component to manage elements such as the header and footer without the need for an additional router outlet.

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

How to display a page outside the router-outlet in angular 4

Answer №1

Answer №2

app.component.html

app.component.ts

usage example

Similar questions

Ways to align and fix a button within a specific div element

When inputting data from an Angular 6 form into Mongoose, the stored date appears to be offset by

Issue with the AngularJS build in Yeoman

How can I show the initial three digits and last three digits when using ngFor loop in Angular?

Invoking a self-executing anonymous function using requestAnimationFrame

Obtaining a JavaScript proxy from a WCF service using webHttpBinding

Need to capture click events on an HTML element? Here's how!

Accessing a data property within an Angular2 route, no matter how deeply nested the route may be, by utilizing ActivatedRoute

Express.js Passport.js throws an error when req.user is not defined

Ignoring the incremented value in a jQuery function

What is the best approach for retrieving values from dynamically repeated forms within a FormGroup using Typescript?

Exploring nested components traversal in React

Encountering TypeScript error in the beforeRouteUpdate hook with Vue and vue-property-decorator

Hide in certain zones, contextual menu

Is it possible for me to offer a service for a nested modal dialog component without replacing the existing service that already has the same token provided

Distinguishing between creating controllers in AngularJS

Guide to utilizing JavaScript for a basic gaming experience

What is the best way to forward specific props from a parent to its children?

Troubleshooting date format errors when parsing two parameters in a jQuery AJAX request

Using currency symbols in Angular 2