angular2-routing

I'm working on an application that needs to configure routes based on some external data source. The life cycle of the app looks like this: ng2 inits with App App contains Header, router-outlet, and Footer default route is configured to homeComponent homeComponent has categoriesListComponent categoriesListComponent calls a get method from categoriesService categoriesService gets back a list of categories from the api categoriesComponent renders the list and injects new routes for each category back into App via a routesConfigurator There's actually another layer of abstraction with a

In my Angular 2 application I'm trying to disable a routerLink without any success. I've tried to handle the click event on the click event (with event.preventDefault() and event.stopPropagation() ) but it doesn't work. How can I disable a routerLink? Disabling pointer-events on the <a [routerlink]="xxx" [class.disabled]="disabled ? true : null">Link</a> a.disabled { pointer-events: none; cursor: default; } See also Angular2, what is the correct way to disable an anchor element? or <a *ngIf="isEnabled" [routerlink]="xxx">Link</a> <div *ngIf="!isEnabled">not a link</div> or to easily reuse the

I have a component and I need to detect if user pressed back button in his browser to navigate back. Currently I'm subscribing router events. constructor(private router: Router, private activatedRoute: ActivatedRoute) { this.routerSubscription = router.events .subscribe(event => { // if (event.navigatesBack()) ... }); } I know that I can use window.onpopstate but it feels like a hack when using Angular2. It's possible to use PlatformLocation which has onPopState listener. import { PlatformLocation } from '@angular/common' (...) constructor(location: PlatformLocation) { location.onPopState(() =

I would like to create an external redirect, but to make all routes consistent I think it would be nice to do everything(including external redirects) under Router States configuration. so: const appRoutes: Routes = [ {path: '', component: HomeComponent}, {path: 'first', component: FirstComponent}, {path: 'second', component: SecondComponent}, {path: 'external-link', /*would like to have redirect here*/} ]; UPD : and I don't want to use empty component for this case like @koningdavid suggested. This solution looks really weird for me. It should be something really easy to implement for such

Angular 2 - How to navigate to another route using this.router.parent.navigate('/about'). It doesnt seem to work. I tried location.go("/about"); as that didnt work. basically once a user has logged in I want to redirect them to another page. Here is my code below: import {Component} from 'angular2/angular2'; import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2'; import {Router} from 'angular2/router'; import {AuthService} from '../../authService'; //Model class User { constructor(public email: string, public password: string) {} } @Component({ templateUrl:'src/app/components/todo

I come from the Asp.Net MVC world where users trying to access a page they are not authorized are automatically redirected to the login page. I am trying to reproduce this behavior on Angular. I came accross the @CanActivate decorator, but it results in the component not rendering at all, no redirection. My question is the following: Does Angular provide a way to achieve this behaviour? If so, how? Is it a good practice? If not, what would be the best practice for handling user authorization in Angular? Update: I've published a full skeleton Angular 2 project with OAuth2 integration on Github

In my routable component I have @RouteConfig { {path: '/login', name: 'Login', component: LoginComponent} } But how do I get the query params if I go to app_url/login?token=1234 ? Thierry Templier To complement the two previous answers, Angular2 supports both query parameters and path variables within routing. In @RouteConfig definition, if you define parameters within a path, Angular2 handles them as path variables and as query parameters if not. Let's take a sample: @RouteConfig([ { path: '/:id', component: DetailsComponent, name: 'Details'} ]) If you call the navigate method of the router

In Angular 1 my config looks like this: $routeProvider .when("/news", { templateUrl: "newsView.html", controller: "newsController", resolve: { message: function(messageService){ return messageService.getMessage(); } } }) How to use resolve in Angular2? @AndréWerlang's answer was good, but if you want the resolved data on the page to change when the route parameter changes , you need to: Resolver: @Injectable() export class MessageResolver implements Resolve<Message> { constructor(private messageService: MessageService, private router: Router) {} resolve(route: ActivatedRouteSnapshot, state: