Redirect to a new page in Angular 2 Routing

Question

I have a scenario say a Home Page(app.component.ts with main.html) which is routed as default

app.component.ts

@RouteConfig([
    {path: '/',name : 'Home' , component : HomeComponent , useAsDefault: true },
    {path: '/user', name : 'User' , component : UserComponent },
    {path: '/about', name : 'About' , component : AboutComponent},
    {path : 'contact', name : 'Contact' , component : ContactComponent}
])

main.html

<a [routerLink]="['/Home']">Home</a>
<a [routerLink]="['/User']">User Login</a>
<a [routerLink]="['/About']">About</a>
<a [routerLink]="['/Contact']">Contact</a>

<router-outlet></router-outlet>

Now lets say for the 2 components i want to route using the router outlet, but for the User, i want to route to a entire new page i.e not in the router outlet . I tried navigate and navigateByUrl doesnt work it still loads it in the <router-outlet> . Please dont suggest window.href

Ive tried using the Redirect class in angular2/router , but unable to do the needful.

Solution 1

UPDATE: The whole router configuration code in this answer is for a router deprecated and removed in about 6/2016

I think what you want are child routes - see Plunker

Updated Plunker with navigation moved to Page1

where the parent route allows to switch between Page1 and Page2, Page1 allows to switch between About and Contact and Page2 only has User.

Page2 could also be UserComponent directly, only if this page should support more than one component, it's necessary to make it a component with child-routes.

You can of course navigate between User and for example About with

router.navigate(['/Page1', 'About']);
router.navigate(['/Page2', 'User']);

import {Component, Directive, Output, EventEmitter} from 'angular2/core'
import {ROUTER_DIRECTIVES, RouteConfig} from 'angular2/router';

@Component({
  selector: 'contact',
  directives: [],
  template: `
  <h2>contact</h2>
`
})
export class ContactComponent {
}

@Component({
  selector: 'about',
  directives: [],
  template: `
  <h2>about</h2>
`
})
export class AboutComponent {
}

@Component({
  selector: 'user',
  directives: [],
  template: `
  <h2>user</h2>
`
})
export class UserComponent {
}

@Component({
  selector: 'page1',
  directives: [ROUTER_DIRECTIVES],
  template: `
  <h2>page1</h2>
  <router-outlet></router-outlet>
`
})
@RouteConfig([
    {path: '/about', name : 'About' , component : AboutComponent, useAsDefault: true},
    {path : '/contact', name : 'Contact' , component : ContactComponent}
])
export class Page1 {
}

@Component({
  selector: 'page2',
  directives: [ROUTER_DIRECTIVES],
  template: `
  <h2>page2</h2>
  <router-outlet></router-outlet>
`
})
@RouteConfig([
    {path: '/user', name : 'User' , component : UserComponent, useAsDefault: true},
])
export class Page2 {
}

@Component({
  selector: 'my-app',
  directives: [ROUTER_DIRECTIVES],
  template: `
  <h2>Hello {{name}}</h2>
  <a href="#" [routerLink]="['/Page1','About']">About</a>
  <a href="#" [routerLink]="['/Page1','Contact']">Contact</a>
  <a href="#" [routerLink]="['/Page2','User']">User</a>
  <router-outlet></router-outlet>
`
})
@RouteConfig([
    {path: '/page1/...',name : 'Page1' , component : Page1 , useAsDefault: true },
    {path: '/page2/...', name : 'Page2' , component : Page2 },
])
export class App {
  constructor() {
    this.name = 'Angular2';
  }  
}

Solution 2

I had similar requirement where i had to go on new page after clicking on button. Let's say we have components trainer,admin,trainee,footer,header and login.

In our Appcomponent i have

<header></header>
<login></login>
<router-outlet></router-outlet>
<footer></footer>

now when i route to new page after login what will happen is new page will come but my original login page still there and new page will come under that log in page, because we have

<router-outlet></router-outlet>

in template of Appcomponent. To get rid of this problem i added <header></header> and <footer></footer> at beginning and end of each page. Now in Appcomponent we have just

<router-outlet></router-outlet>.

so when we route to new page it will occupy whole page.

Solution 3

The simple solution is just use router-outlet in app.component.html instead of using it in the html where your UI code is written , It avoids new page coming under the original page. make sure that you are not writing any code in app.component.html

for example if your main html code is written in home.component.html and you have to route to page connections.component.html then you can do as follows :

index.html :

<app-root></app-root> // this will route you to the app component from index

app.component.html :

<router-outlet></router-outlet> // this will load the new page code in app.component.html home.component.html:

<a routerLink =['/connection'] > Add connection </a> // routes to connection.html U need not write router-outlet in home.component.html

Comments

[Pratik Kelwalkar]

well really amazing of you to provide an instant plunker and solution, but as i see for the plunker example above, when i click on Users, i do not want the contents of the page where <router-outlet> is placed. I.e i do not want my component to be loaded into that outlet rather want it to load it as a new entire page. thanks again for the answer

[Habchi]

@PratikKelwalkar Did you find a solution for your problem? I'm facing the same here. Thanks

[Günter Zöchbauer]

What is a "new entire page here"? Usually in Angular you add a <router-outlet> in the root component AppComponent, and load a route that adds the desired component to this <router-outlet>.

[Habchi]

@GünterZöchbauer Let's say for example we have a website where the landing page is basically made to show the features of your webapp with a navbar that has two buttons login and signup. If you click on login I want to display a new different page (without the navbar that i had in the landing page) containing only a form in the middle. <router-outlet> is used like : <Link1> <Link2> <Link3> <Router-outlet> ==> where the change is made on the items of the navbar, but what if on clicking on a link, I want a new structure without the router-outlet?

[Günter Zöchbauer]

I guess this is worth a new question. I'd just us an *ngIf on the navbar to show/hide it depending on the route.

[Habchi]

I already tried to ask a new question about that, that got deprecated and had some pretty bad comments on it like it's dumb so ...

[Elias MP]

Great answer @GünterZöchbauer. Thanks.

[Günter Zöchbauer]

@GileadKenzo Thanks, quite outdated though. The route configuration won't work with the new router.

[Elias MP]

@GünterZöchbauer. Dawn. Anyway your answer was really complet. Thanks for your efford and for helping us :) :) :). Cheers Mate