tab-link.component.ts

import {Component, OnInit, ElementRef} from 'angular2/core';
import {Tab} from './tab';
import {RouterLink} from 'angular2/router';

@Component({
  selector: '[tabLink]',
  inputs: ['tab'],
  directives: [RouterLink],
  template: `
        <a [routerLink]="['Tab', {id: tab.id}]" [attr.aria-controls]="tab.title" role="tab">
          {{tab.title}}
        </a>
      `
})
export class TabLinkComponent implements OnInit, OnDestroy {
  tab: Tab;
  private _observer: MutationObserver;
  constructor(private _el: ElementRef) {
  }
  
  ngOnInit() {
    let $anchor: JQuery = this.getAnchor();
    let anchor: HTMLElement = $anchor[0];

    this._observer = new MutationObserver((mutations: MutationRecord[]) => {
      mutations.forEach((mutation: MutationRecord) => {
        if (mutation.attributeName === "class") {
          this.tab.active = $anchor.hasClass("router-link-active");
        }
      });
    });
    this._observer.observe(anchor, { attributes: true });
  }
  
  ngOnDestroy() {
    this._observer.disconnect();
  }
  
  getAnchor(): JQuery {
    return jQuery(this._el.nativeElement).find("a");
  }
}