angular2-routing

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 router in Angular breaks many of these solutions, but offers a very simple solution of its own. As of RC.3, the preferred solution is to use [routerLinkActive] as shown in this answer . In an Angular application (current in the 2.0.0-beta.0 release as I write this), how do you determine what the currently active route is? I'm working on an app that

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 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 has few contents, it gives an impression that the 2nd page lacks the contents. Since the contents are visible only if user scroll to the top of the page. I can scroll the window to the top of the page in ngInit of the component but, is there any better solution that can automatically handle all routes in my app? You can register a route change listener

I would like to disable url encoding. When I use this below. this.router.navigate(['/profile', { tags: 'one,two' }]); The url is like this http://localhost:4200/profile;tags=one%2Ctwo I would like it to be pretty like below http://localhost:4200/profile;tags=one,two Is there a way to disable the url encoding? Angular2 by default uses encodeURIComponent() to encode queryParams in URL, you can avoid it by writing custom URL serializer and override default functionality. In my case, I wanted to avoid Angular2 to avoid replacing comma(,) by (%2). I was passing Query as lang=en-us,en-uk where it

I am trying to use Angular2 router guards to restrict access to some pages in my app. I am using Firebase Authentication. In order to check if a user is logged in with Firebase, I have to call .subscribe() on the FirebaseAuth object with a callback. This is the code for the guard: import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; import { AngularFireAuth } from "angularfire2/angularfire2"; import { Injectable } from "@angular/core"; import { Observable } from "rxjs/Rx"; @Injectable() export class AuthGuard implements CanActivate { constructor

I am trying to test my component with angular 2 final, but I get an error because the component uses the routerLink directive. I get the following error: Can't bind to 'routerLink' since it isn't a known property of 'a'. This is the relevant code of the ListComponent template <a *ngFor="let item of data.list" class="box" routerLink="/settings/{{collectionName}}/edit/{{item._id}}"> And here is my test. import { TestBed } from '@angular/core/testing'; import { ListComponent } from './list.component'; import { defaultData, collectionName } from '../../config'; import { initialState } from '../..