Stack Overflow
Stack Overflow

Questions tagged [angular2-routing]

Angular Routing is a built-in feature that enables you to create a Single Page Application (SPA) user interface, where users can navigate to different views without having to reload the entire page from the server every time.

Angular Routing is a built-in feature that enables you to create a Single Page Application (SPA) user interface, where users can navigate to different views without having to reload the entire page from the server every time.

The Angular Router intercepts the browser's page navigation and document history in order to provide this SPA functionality. Instead of using the traditional anchor tags like this:

<a href='/products'>Products</a>

Angular Routing uses "routerLink" to navigate between views:

<a routerLink="/products">Products</a>

Questions using this tag could be about:

  • Troubleshooting routing problems
  • How to use the "routerLinkActive" tag to control properties
  • Wildcard and error routing
  • Redirecting views
  • Route Guards, including Authentication & Authorization
  • Child Routes
  • How to configure the App Routing Module (and if you need one)
  • Asynchronous Routing

Routing is covered in great detail and with many examples in the Angular Guide:

https://angular.io/guide/router

4785 questions
747
votes
41 answers

How to get current route

The current docs only talk about getting route params, not the actual route segments. For example, if i want to find the parent of current route, how is that possible?
pdeva
  • 43,605
  • 46
  • 133
  • 171
655
votes
32 answers

How to detect a route change in Angular?

I am looking to detect a route change in my AppComponent. Thereafter I will check the global user token to see if the user is logged in so that I can redirect the user if the user is not logged in.
AngularM
  • 15,982
  • 28
  • 94
  • 169
575
votes
29 answers

How to go back last page

Is there a smart way to go back last page in Angular 2? Something like this._router.navigate(LASTPAGE); For example, page C has a Go Back button, Page A -> Page C, click it, back to page A. Page B -> Page C, click it, back to page B. Does router…
Hongbo Miao
  • 45,290
  • 60
  • 174
  • 267
474
votes
28 answers

Angular 2 Scroll to top on Route Change

In my Angular 2 app when I scroll down a page and click the link at the bottom of the page, it does change the route and takes me to the next page but it doesn't scroll to the top of the page. As a result, if the first page is lengthy and 2nd page…
Naveed Ahmed
  • 10,048
  • 12
  • 46
  • 85
388
votes
31 answers

In Angular, how do you determine the active route?

NOTE: There are many different answers here, and most have been valid at one time or another. The fact is that what works has changed a number of times as the Angular team has changed its Router. The Router 3.0 version that will eventually be the…
Michael Oryl
  • 20,856
  • 14
  • 77
  • 117
325
votes
4 answers

How to pass query parameters with a routerLink

I want to pass a query parameter prop=xxx. This didn't work Somewhere
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
304
votes
16 answers

Can't bind to 'routerLink' since it isn't a known property

Recently, I have started playing with angular 2. It's awesome so far. So, i have started a demo personal project for the sake of learning using angular-cli. With the basic routing setup, I now want to navigate to some routes from header, but since…
Umair Sarfraz
  • 5,284
  • 4
  • 22
  • 38
290
votes
15 answers

How to redirect to an external URL in Angular2?

What is the method for redirecting the user to a completely external URL in Angular 2. For example, if I need to redirect the user to an OAuth2 server in order to authenticate, how would I do that? Location.go(), Router.navigate(), and…
Michael Oryl
  • 20,856
  • 14
  • 77
  • 117
272
votes
9 answers

How to pass a parameter to routerLink that is somewhere inside the URL?

I know I can pass a parameter to routerLink for routes such as /user/:id by writing [routerLink]="['/user', user.id]" but what about routes such as this one: /user/:id/details Is there a way to set this parameter or should I consider a different…
Thorsten Westheider
  • 10,572
  • 14
  • 55
  • 97
237
votes
7 answers

Angular 2: 404 error occur when I refresh through the browser

I have stored my single-page application in my server within a folder named as "myapp". I have changed the URL in the base to http://example.com/myapp/`. My project has two pages. So I implement Angular 2 routing. I set the default page as login.…
DAN
  • 3,140
  • 5
  • 20
  • 22
225
votes
5 answers

Angular 2 - How do I navigate to another route using this.router.parent.navigate('/about')?

Angular 2 - How do I navigate to another route using this.router.parent.navigate('/about')? It doesn't seem to work. I tried location.go("/about"); as that didn't work. Basically, once a user has logged in I want to redirect them to another…
AngularM
  • 15,982
  • 28
  • 94
  • 169
212
votes
25 answers

'router-outlet' is not a known element

I have a mvc 5 project with a angular frontend . I wanted to add routing as described in this tutorial https://angular.io/guide/router. So in my _Layout.cshtml I added a and created my routing in my app.module. But when I run this…
Molo
  • 2,143
  • 2
  • 13
  • 11
204
votes
33 answers

Angular 2.0 router not working on reloading the browser

I am using Angular 2.0.0-alpha.30 version. When redirect to a different route, then refresh the browser , its showing Cannot GET /route. Can you help me with figuring why this error happened.
Vinz and Tonz
  • 3,487
  • 5
  • 21
  • 32
193
votes
14 answers

Change route params without reloading in Angular 2

I'm making a real estate website using Angular 2, Google Maps, etc. and when a user changes the center of the map I perform a search to the API indicating the current position of the map as well as the radius. The thing is, I want to reflect those…
Marcos Basualdo
  • 2,580
  • 3
  • 18
  • 11
192
votes
18 answers

Passive Link in Angular 2 - equivalent

In Angular 1.x I can do the following to create a link which does basically nothing: My Link But the same tag navigates to the app base in Angular 2. What is the equivalent of that in Angular 2? Edit: It looks like a bug in the…
s.alem
  • 12,579
  • 9
  • 44
  • 72
1
2 3
…
99 100