Click listener when tab is clicked - angular2 and ng bootstrap

angular, ng-bootstrap, tabs

Solution

You can declare `ngbTabTitle` template and catch click event there:

<ngb-tab>
  <ng-template ngbTabTitle>
      <div (click)="fetchNews('active')">Active</div>
  </ng-template>
  <ng-template ngbTabContent>
    <table class="table table-sm table-striped" (click)="fetchNews('active')">
      ...
    </table>
  </ng-template>
<ngb-tab>

Problem

I have the following html code snippet. I am using angular2, ng-bootstrap ng tab. My question is how do i invoke a method click when a tab is clicked? I added (click) but I see that the method fetchNews() is not getting invoked at all when I click on the tab. What am I doing wrong? ``` <ngb-tab title="Active" (click)="fetchNews('active')"> <ng-template ngbTabContent> <table class="table table-sm table-striped"> <thead> <tr> <th>Title</th> <th>Description</th> <th>Attachment</th> <th>Start Date</th> <th>End Date</th> <th>Actions</th> </tr> </thead> <tr *ngFor="let item of news"> <td>{{item.title}}</td> <td>{{item.description | ellipsis:25}}</td> <td>{{item.attachmentUrl | ellipsis:25}}</td> <td>{{item.startDate | date: 'MM/dd/yyyy hh:mm a'}}</td> <td>{{item.endDate | date: 'MM/dd/yyyy hh:mm a'}}</td> <td> <button type="button" class="btn btn-secondary btn-sm" (click)="showNewsModal('active',item, true)"> Modify </button> </td> </tr> </table> </ng-template> </ngb-tab> ```

Original source