Bootstrap events in angular2

Question

I write a simple angular 2 component that displays a bootstrap tab. I want to handle bootstrap event show.bs.tab. I tried to put a event handler on the ul and all a tags, but I receive no event.

@Component({
    selector: 'tabpanel',
    template: `
        <div>
        <ul class="nav nav-tabs" role="tablist" (show.bs.tab)="onTab()">
            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab" (show.bs.tab)="onTab()">Home</a></li>
            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab" (show.bs.tab)="onTab()">Profile</a></li>
            <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab" (show.bs.tab)="onTab()">Messages</a></li>
            <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab" (show.bs.tab)="onTab()">Settings</a></li>
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="home">1...</div>
            <div role="tabpanel" class="tab-pane" id="profile">2...</div>
            <div role="tabpanel" class="tab-pane" id="messages">3...</div>
            <div role="tabpanel" class="tab-pane" id="settings">4...</div>
        </div>
        </div>`,
    directives: [CORE_DIRECTIVES]
})
class TabbedPanel {
    onTab() {
        console.info('tab !!');
    }
}

How to receive the bootstrap events ? I could have the same question for events of libraries like fullcalendar, openlayers which expose various events. I use angular 2 alpha 44.

Answer 1

Angular2 won't catch events like that, the event you are passing in the parenthesis should be created by you in the component.

First of all, I separated the code in two : a Component and a Directive. The directive will be responsible for emitting the event, and the Component will provide the function to be executed.

So you have two options that I can see (sorry if I miss others).

• Use jQuery directly. Remember that all this is javascript [1]
• Use Observables to catch events from jQuery [2]

Option [1]

@Output() showTab = new EventEmitter();

// I used 'ul', I'm not familiarized with bootstrap events, 
// so I don't really know where the event is being attached
$('ul').on('show.bs.tab', (e) => {
  this.showTab.next();
});

Option [2]

@Output() showTab = new EventEmitter();

Rx.Observable
  .fromEvent($(document), 'show.bs.tab')
  .subscribe((e) => this.showTab.next());

Reference for using RxJS with jQuery

And your HTML would look like this

<ul tab-directive class="nav nav-tabs" role="tablist" (show-tab)="onTab()">

Note that we will trigger (show-tab) when we call this.showTab.next() and finally onTab() will be called.

Here's a plnkr the full example for both options.

I hope it helps.