import { Directive , ElementRef , Inject , Renderer , QueryList , Query } from 'angular2/core' ; import { Location } from 'angular2/router' ; import 'rxjs/add/operator/map' ; Example @ Directive ( { selector : 'a' } ) class Link { constructor ( private el ) { } get href ( ) : string { return this . el . nativeElement . getAttribute ( 'href' ) ; } } @ Directive ( { selector : 'li' } ) class ListItem { className = 'active' ; constructor ( @ Query ( Link ) public links , @ Inject ( Location ) public location , private el , private renderer ) { } toggleClass ( ) { if ( this . linkHref === `#${ this . location . path ( ) }` ) { this . renderer . setElementClass ( this . el , this . className , true ) ; } else { this . renderer . setElementClass ( this . el , this . className , false ) ; } } get linkHref ( ) : string { return this . links . first . href ; } } @ Directive ( { selector : '[set-active]' , host : { '(click)' : 'setActive()' } } ) class List { _href ; constructor ( @ Query ( ListItem ) private items ) { this . items . changes . subscribe ( _ => { this . setActive ( ) ; } ) ; } setActive ( ) { this . items . map ( item => { item . toggleClass ( ) ; } ) ; } } export var SetActive = [ List , ListItem , Link ] ;