Angular 2 - getting active link part 2

Question

I know this question has been asked a number of times and I previously asked it too however I am asking again as I am just not getting this to work. 2 days trying pretty much every method out there with no success.

So hopefully I can get a very simple version working.

My Bootstrap:

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from "./module/Application/src/Controller/app.component";
import {ROUTER_PROVIDERS} from "angular2/router";

bootstrap(AppComponent, [ROUTER_PROVIDERS]);

I have a menu component:

import {Component} from 'angular2/core'; 
import {Router, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
@Component({
    selector: 'my-poker-menu',
    templateUrl: './dev/module/poker/view/poker/menu.tpl.html',
    directives:[ROUTER_DIRECTIVES] })

export class PokerMenuComponent {
    router: Router;

    constructor(data: Router) {
        this.router = data;
    }

    isRouteActive(tab): boolean {
        if (this.router.currentInstruction && this.router.currentInstruction.component.routeData) {
            return tab == this.router.currentInstruction.component.routeData.data['activeTab'];
        }
        return false;
    }


}

The view for this component:

<ul class="poker-menu">
    <li>
        <a [routerLink]="['PokerHands']">Poker Hands</a> {{isRouteActive([PokerHands])}}
    </li>
    <li>
        <a [routerLink]="['TexasHoldem']">Texas hold'em</a>
    </li>
    <li>
        <a [routerLink]="['Omaha']">Omaha</a>
    </li>
    <li>
        <a [routerLink]="['Stud']">Stud</a>
    </li>
</ul>

At this point in time, I want to get {{isRouteActive([PokerHands])}} to return true when I am on the PokerHands route. From there I am going to set the li class using ngClass which is the easiest/logical method for me to understand at this point in my Angular2 studies.

When bug testing the above:

console.log(this.router.currentInstruction);

Returns "null" so at present all routes are returned as "False".

Am I missing something in my code?

EDIT:

The root component or the base component for this module:

poker.component.ts

import {Component} from 'angular2/core';
import {ROUTER_DIRECTIVES} from "angular2/router";
import {RouteConfig} from "angular2/router";
import {NetworkPokerComponent} from "./network-poker.component";
import {PokerHandsComponent} from "./poker-hands.component";
import {OmahaComponent} from "./omaha.component";
import {TexasHoldemComponent} from "./texas-holdem.component";
import {StudComponent} from "./stud.component";
import {SubMenuComponent} from "./sub-menu.component";
@Component({
    selector: 'my-poker',
    templateUrl: './dev/module/poker/view/poker/poker.tpl.html',
    directives:[ROUTER_DIRECTIVES,SubMenuComponent]
})
@RouteConfig([
    {path:'/network-poker',name:'NetworkPoker',component:NetworkPokerComponent, useAsDefault:true},
    {path:'/poker-hands',name:'PokerHands',component:PokerHandsComponent },
    {path:'/omaha',name:'Omaha',component:OmahaComponent },
    {path:'/texas-holdem',name:'TexasHoldem',component:TexasHoldemComponent },
    {path:'/stud',name:'Stud',component:StudComponent },
])
export class PokerComponent {

}

The poker.tpl.html holds the router outlet

<router-outlet></router-outlet>

So for instance the poker-hands component:

import {Component} from 'angular2/core'; 
import {PokerMenuComponent} from "./poker-menu.component"; 
import {SubMenuComponent} from "./sub-menu.component"; 
import {PokerComponent} from "./poker.component";

@Component({
    selector: 'my-poker-hands',
    templateUrl: './dev/module/poker/view/poker/poker-hands.tpl.html',
    directives:[PokerMenuComponent,SubMenuComponent] })

export class PokerHandsComponent {

}

Poker-hands view pulls in the menu component:

<section class="page-content poker">
    <div class="container">
        <div class="title-bar">
            <h2 class="title green2">Poker games <span> Poker hands</span></h2>
            <div class="right-nav">
                <my-poker-sub-menu></my-poker-sub-menu>
            </div>
        </div>
        <my-poker-menu></my-poker-menu>
...

Where is the `` for the `PokerHands`, `TexasHoldem`, ... routes. What is your root component, what `RouteConfigs` does it have? — Günter Zöchbauer, Apr 19 '16 at 09:18
I have added an edit. I have a pokerComponent where the routing is setup. As the poker routes share a common menu I opted for a poker-menu component and is pulled into the templates with: ... — HappyCoder, Apr 19 '16 at 09:33
Possible duplicate of [Get active link in Angular 2](http://stackoverflow.com/questions/36674577/get-active-link-in-angular-2) — Dov Benyomin Sohacheski, Apr 28 '16 at 13:15

Günter Zöchbauer · Accepted Answer · 2016-04-19T09:50:33.553

0

This worked for me

  isRouteActive(tab):boolean {
    if (this.router.currentInstruction /*&& this.router.currentInstruction.component.routeData*/) {
      return tab == this.router.currentInstruction.component.routeName;
    }
    return false;
  }

or if you want to check the type instead of the component name

return tab == this.router.currentInstruction.component.componentType;

using

{{isRouteActive('PokerHands')}}

I don't know what {{isRouteActive([PokerHands])}} is supposed to do.

You can't reference types like PokerHands in the template. In my example I used the string name.

Plunker example

edited Apr 19 '16 at 09:50

answered Apr 19 '16 at 09:36

Günter Zöchbauer

623,577
216
2,003
1,567

I updated my answer. I don't know why `routeName` is not declared on `ComponentInstruction` but it works and it is also used in unittests in the Angular2 GitHub repo. – Günter Zöchbauer Apr 19 '16 at 09:45
Thanks, this: {{isRouteActive([PokerHands])}} is just a way for me to see if a true response is being returned... – HappyCoder Apr 19 '16 at 09:46
You actually want to check for the component type then? – Günter Zöchbauer Apr 19 '16 at 09:46
In my component: this.router.currentInstruction returns as null so the test does not work. – HappyCoder Apr 19 '16 at 09:50
Works for me, see Plunker in updated answer. I didn't incorporate your latest update in your question. If you update the Plunker to reproduce your problem I'll have another look. – Günter Zöchbauer Apr 19 '16 at 09:51
I managed to get it to add the router-active-link so will style that. Thank you for your help. – HappyCoder Apr 20 '16 at 08:11

Angular 2 - getting active link part 2

1 Answers1