Redirect within component Angular 2

Question

I have a simple method that at the end of it I want to redirect to another component:

export class AddDisplay{
  display: any;

  addPairTo(name: string, pairTo: string){
    this.display = {};
    this.display.name = name;
    this.display.pairTo = pairTo;

  }
}

What I wanna do is at the end of the method redirect to another component:

export class AddDisplay{
  display: any;

  addPairTo(name: string, pairTo: string){
    this.display = {};
    this.display.name = name;
    this.display.pairTo = pairTo;

    this.redirectTo('foo');
  }
}

How do I achieve this in Angular 2?

I can only think of routing. You can do that with navigate

Eric Martinez
– Eric Martinez

2015-10-01 22:53:21 +00:00
Commented Oct 1, 2015 at 22:53 — Eric Martinez
– Eric Martinez, Commented Oct 1, 2015 at 22:53

kit · Accepted Answer · 2016-06-15 13:43:01Z

103

first configure routing

import {RouteConfig, Router, ROUTER_DIRECTIVES} from 'angular2/router';

and

@RouteConfig([
  { path: '/addDisplay', component: AddDisplay, as: 'addDisplay' },
  { path: '/<secondComponent>', component: '<secondComponentName>', as: 'secondComponentAs' },
])

then in your component import and then inject Router

import {Router} from 'angular2/router'

export class AddDisplay {
  constructor(private router: Router)
}

the last thing you have to do is to call

this.router.navigateByUrl('<pathDefinedInRouteConfig>');

or

this.router.navigate(['<aliasInRouteConfig>']);

edited Jun 15, 2016 at 13:43

answered Oct 2, 2015 at 9:35

kit

4,9203 gold badges26 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ben Thielker Over a year ago

FYI: navigateByUrl doesn't accept an array. Just a single string.

dopatraman Over a year ago

How do I reload the view? navigate and navigateByUrl seem to change change the url but the components bound to the route are not reloaded.

jbandi Over a year ago

Note: This answer addresses a beta or release-candidate version of Angular 2 and is no longer applicable for Angular 2 final.

user5466293 · Accepted Answer · 2016-04-08 08:20:53Z

9

@kit's answer is okay, but remember to add ROUTER_PROVIDERS to providers in the component. Then you can redirect to another page within ngOnInit method:

import {Component, OnInit} from 'angular2/core';
import {Router, ROUTER_PROVIDERS} from 'angular2/router'

@Component({
    selector: 'loginForm',
    templateUrl: 'login.html',
    providers: [ROUTER_PROVIDERS]
})

export class LoginComponent implements OnInit {

    constructor(private router: Router) { }

    ngOnInit() {
        this.router.navigate(['./SomewhereElse']);
    }

}

answered Apr 8, 2016 at 8:20

user5466293

2 Comments

jbandi Over a year ago

Note: This answer addresses a beta or release-candidate version of Angular 2 and is no longer applicable for Angular 2 final.

Hugo Over a year ago

@jbandi could you please then provide an updated answer please?

user10038293 · Accepted Answer · 2018-07-09 16:05:45Z

8

This worked for me Angular cli 6.x:

import {Router} from '@angular/router';

constructor(private artistService: ArtistService, private router: Router) { }

  selectRow(id: number): void{
       this.router.navigate([`./artist-detail/${id}`]);

  }

answered Jul 9, 2018 at 16:05

user10038293

Comments

Rence · Accepted Answer · 2020-01-30 12:39:54Z

1

callLog(){
    this.http.get('http://localhost:3000/getstudent/'+this.login.email+'/'+this.login.password)
    .subscribe(data => {
        this.getstud=data as string[];
        if(this.getstud.length!==0) {
            console.log(data)
            this.route.navigate(['home']);// used for routing after importing Router    
        }
    });
}

edited Jan 30, 2020 at 12:39

Rence

2,9403 gold badges27 silver badges44 bronze badges

answered Jan 30, 2020 at 12:30

PYRO BUG

112 bronze badges

1 Comment

Tiago Peres Over a year ago

Hi PYRO BUG, welcome. Please consider adding an explanation.

Collectives™ on Stack Overflow

Redirect within component Angular 2

4 Answers 4

3 Comments

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related