angular2-routing

How to set Bootstrap navbar “active” class in Angular 2?

by

If you use the new 3.0.0. component router ( https://github.com/angular/vladivostok ) you can use the routerLinkActive directive. No further javascript required. <ul class=”nav navbar-nav”> <li [routerLinkActive]=”[‘active’]”> <a [routerLink]=”[‘one’]”>One</a></li> <li [routerLinkActive]=”[‘active’]”> <a [routerLink]=”[‘second’]”>Second</a></li> </ul> I used “@angular/router”: “^3.0.0-alpha.7”

Angular2 – ‘router-outlet’ is not a known element [duplicate]

by

AdminComponent is part of AdminComponentModule and you have not imported RouterModule inside AdminComponentModule module: // admin.component.ts import {Component} from “@angular/core”; @Component({ selector: ‘admin’, template: “<router-outlet></router-outlet>”, }) export class AdminComponent { constructor() { } } // admin.module.ts const ADMIN_DECLARATION = [ AdminComponent ]; @NgModule({ imports: [ BrowserModule, TranslateModule, RouterModule, FormsModule, ReactiveFormsModule ], declarations: [ ADMIN_DECLARATION ], … Read more

Angular 2: getting RouteParams from parent component

by

UPDATE: Now that Angular2 final was officially released, the correct way to do this is the following: export class ChildComponent { private sub: any; private parentRouteId: number; constructor(private route: ActivatedRoute) { } ngOnInit() { this.sub = this.route.parent.params.subscribe(params => { this.parentRouteId = +params[“id”]; }); } ngOnDestroy() { this.sub.unsubscribe(); } } ORIGINAL: Here is how i did … Read more

Navigate relative with Angular 2 Router (Version 3)

by

After doing some more research I came across with this.router.createUrlTree([‘../step2’], {relativeTo: this.activatedRoute}); and this.router.navigate([‘../step2’], {relativeTo: this.activatedRoute}); First approach (Router.createUrlTree API) did not work for me, i.e. nothing happened. Second approach (Router.navigate API) works. Update 2016-10-12 There is another stackoverflow question as well: How do I navigate to a sibling route Update 2016-10-24 Documentation: Routing & … Read more

Angular 2 reload route on param change

by

You can change the routeReuseStrategy directly at the component level: constructor(private router: Router) { // force route reload whenever params change; this.router.routeReuseStrategy.shouldReuseRoute = () => false; } Likewise, the reuse strategy can be changed globally. This does not necessarily address your problem directly but seeing how this question is the first search result for “angular … Read more

How can I conditionally disable the routerLink attribute?

by

Disable pointer-events on the element via CSS: <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 disabled link template <ng-template #disabledLink> <div *ngIf=”!isEnabled”>not a … Read more

Angular2 multiple router-outlet in the same template

by

yes you can, but you need to use aux routing. you will need to give a name to your router-outlet: <router-outlet name=”auxPathName”></router-outlet> and setup your route config: @RouteConfig([ {path:”https://stackoverflow.com/”, name: ‘RetularPath’, component: OneComponent, useAsDefault: true}, {aux:’/auxRoute’, name: ‘AuxPath’, component: SecondComponent} ]) Check out this example, and also this video. Update for RC.5 Aux routes has … Read more