Angular 4 location.path to navigate between components

Question

I have recently started a project with angular 4 an typescripts. All is going well until one point:

I have a need to create routing principles. For this I have created routing in My App.Module.ts:

RouterModule.forRoot([
      {path: '', component: HomeComponent },
      {path: 'thanks', component: ThanksComponent} //, canActivate: [AuthGuard]

    ])

In angular js, in order to pass from one route to another we used routeConfig and then just used in controller:

$location.path("/roue");

In order to navigate.

My big idea is to navigate between components just like I used navigation in angular js. How can I navigate between components in Angular 4?

angular.io/guide/router

Jota.Toledo
– Jota.Toledo

2018-01-09 09:40:29 +00:00
Commented Jan 9, 2018 at 9:40 — Jota.Toledo
– Jota.Toledo, Commented Jan 9, 2018 at 9:40
meta.stackoverflow.com/questions/252677/…

Jota.Toledo
– Jota.Toledo

2018-01-09 10:15:34 +00:00
Commented Jan 9, 2018 at 10:15 — Jota.Toledo
– Jota.Toledo, Commented Jan 9, 2018 at 10:15

user4676340 · Accepted Answer · 2018-01-09 09:14:20Z

3

@Sajeetharan almost got it.

import the Router with

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

Inject it in your component

constructor(private router: Router) {}

Now you have several ways to call it

this.router.navigate(['thanks']); // Array of routes
this.router.navigateByUrl('/thanks'); // Absolute path
this.router.navigate(['thanks', 1]); // route corresponding to thanks/1, useful for params

answered Jan 9, 2018 at 9:14

user4676340

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

Comments

Sajeetharan · Accepted Answer · 2018-01-09 09:02:14Z

1

You have to import Router and use

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

constructor(private _router: Router)
this.router.navigate("/thanks");

answered Jan 9, 2018 at 9:02

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Comments

warzag · Accepted Answer · 2018-01-09 09:13:43Z

1

You can either use

[routerLink]="['/roue']" in your html

or in your component :

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

constructor(
    private router: Router,
) { }

goToRoue(){
    this.router.navigate(['/roue']);
}

Hope it helps!

answered Jan 9, 2018 at 9:13

warzag

536 bronze badges

Collectives™ on Stack Overflow

Angular 4 location.path to navigate between components

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related