Angular 2 How to “watch” for tab changes

Question

I have:

  
    
Some tab content
  
  

        

Answer 1

You need to publish the event as an @Output from you md-tab component. Something like:

import { EventEmitter, Output, Input, Component } from '@angular/core';

@Component({
    selector: 'tab',
    template: `
        {{ name }}
    `,
    styles: [`
    `]
})
export class TabComponent {
    @Input() name = 'replaceme';
    @Output() tabClicked = new EventEmitter();

    clicked() {
        this.tabClicked.emit();
    }
}

Then you consume that event in the md-tab-group, something like this:

import { Component }          from '@angular/core';

@Component({
    selector: 'tab-group',
    template: `
        
        
        

        {{ selectedTab }}
        
    `,
    styles: [`
    `]
})
export class TabGroupComponent {
    private tabs = ['foo', 'bar'];
    private selectedTab = this.tabs[0];

    onInit() {
        this.selectedTab = this.tabs[0];
    }

    tabChanged(tab) {
        this.selectedTab = tab;
    }
}

Heres a working plunker that demonstrates the concept