feat(router): RouterActive

modules/angular2/router.ts

@@ -7,6 +7,7 @@
 export {Router} from './src/router/router';
 export {RouterOutlet} from './src/router/router_outlet';
 export {RouterLink} from './src/router/router_link';
+export {RouterActive} from './src/router/router_active';
 export {RouteParams, RouteData} from './src/router/instruction';
 export {PlatformLocation} from './src/router/platform_location';
 export {RouteRegistry, ROUTER_PRIMARY_COMPONENT} from './src/router/route_registry';
@@ -27,6 +28,7 @@ import {PathLocationStrategy} from './src/router/path_location_strategy';
 import {Router, RootRouter} from './src/router/router';
 import {RouterOutlet} from './src/router/router_outlet';
 import {RouterLink} from './src/router/router_link';
+import {RouterActive} from './src/router/router_active';
 import {RouteRegistry, ROUTER_PRIMARY_COMPONENT} from './src/router/route_registry';
 import {Location} from './src/router/location';
 import {ApplicationRef, provide, OpaqueToken, Provider} from 'angular2/core';
@@ -55,7 +57,7 @@ import {BaseException} from 'angular2/src/facade/exceptions';
  * bootstrap(AppCmp, [ROUTER_PROVIDERS]);
  * ```
  */
-export const ROUTER_DIRECTIVES: any[] = CONST_EXPR([RouterOutlet, RouterLink]);
+export const ROUTER_DIRECTIVES: any[] = CONST_EXPR([RouterOutlet, RouterLink, RouterActive]);
 
 /**
  * A list of {@link Provider}s. To use the router, you must add this to your application.

modules/angular2/src/router/router_active.ts

@@ -0,0 +1,32 @@
+import {isPresent} from 'angular2/src/facade/lang';
+import {Directive, Query, Attribute, ElementRef, Renderer, QueryList} from 'angular2/core';
+import {Router} from './router';
+import {RouterLink} from './router_link';
+
+/**
+ * RouterActive dynamically finds the first element with routerLink and toggles the active class
+ *
+ * ## Use
+ *
+ * ```
+ * <li router-active="active"><a [routerLink]=" ['/Home'] ">Home</a></li>
+ * <li [routerActive]="'active'"><a [routerLink]=" ['/Home'] ">Home</a></li>
+ * ```
+ */
+@Directive({selector: '[router-active]', inputs: ['routerActive']})
+export class RouterActive {
+  routerActive: string = null;
+  routerActiveAttr: string = 'active';
+
+  constructor(router: Router, element: ElementRef, renderer: Renderer,
+              @Query(RouterLink) routerLink: QueryList<RouterLink>,
+              @Attribute('router-active') routerActiveAttr: string) {
+    router.subscribe(() => {
+      let active = routerLink.first.isRouteActive;
+      renderer.setElementClass(element.nativeElement, this._propOrAttr(), active);
+    });
+  }
+  private _propOrAttr() {
+    return isPresent(this.routerActive) ? this.routerActive : this.routerActiveAttr;
+  }
+}