Example of Directives Injecting Directives

app.ts

import {Component, bootstrap} from 'angular2/angular2';
import {Tabs} from "./Tabs";
import {Tab} from "./Tab";

@Component({
    selector: 'hello-app',
    directives: [Tabs, Tab],
    template: `
            // Doesn't work
            <div tabs>
                <div tab></div>
            </div>
            
            // Doesn't work either
            <div tabs tab></div>
    `
})
export class HelloApp {}

bootstrap(HelloApp);

tab.ts

import {Directive, ElementRef} from 'angular2/angular2';
import {Tabs} from './tabs';

@Directive({
    selector: '[tab]'
})
export class Tab {
    constructor(el: ElementRef, tabs: Tabs) {
        console.log('Tabs:', tabs);
    }
}

tabs.ts

import {Directive, ElementRef} from 'angular2/angular2';

@Directive({
    selector: '[tabs]'
})
export class Tabs {
    constructor(el: ElementRef) {
        console.log('Tabs:', el);
    }
}