Click listener when tab is clicked - angular2 and ng bootstrap

Question

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>

Solution 1

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>

Solution 2

The below should work correctly every time.

fetchNews(evt: any) {
  console.log(evt); // has nextId that you can check to invoke the desired function
}

<ngb-tabset (tabChange)="fetchNews($event)">
  <ngb-tab title="Active">
    <ng-template ngbTabContent>
      <table class="table table-sm table-striped">
        ...
      </table>
    </ng-template>
  </ngb-tab>
</ngb-tabset>

Solution 3

1. In Html, You have to add tabChange Event, in ngb-tabset tag
2. Set unique id in event ngb-tab
3. In .ts file, perform action of change tab

.html file

<ngb-tabset (tabChange)="changeTab($event)">   <- Add Event 
    <ngb-tab [id]="0">                         <- SET ID
        <ng-template ngbTabTitle>
        </ng-template>
        <ng-template ngbTabContent>
        </ng-template>
    </ngb-tab>
    <ngb-tab [id]="1">                          <- SET ID
        <ng-template ngbTabTitle>
        </ng-template>
        <ng-template ngbTabContent>
        </ng-template>
    </ngb-tab>
</ngb-tabset>

.ts file

changeTab(event) {
    if (event.nextId == '0') {
        // Action for first tab
    }

    else if (event.nextId == '1') {
        // Action for second tab
    }
}

Solution 4

Late to the party but for the click event to work it has to be set on the ngb-tabset (which I don't see in your code and usually bootstrap tabs have that tag) and not on the ngb-tab <ngb-tabset type="pills" id="myId" class="myClass" (click)="togglePanel($event)">

View more solutions

Comments

[Karu]

I noticed one thing though. This works only if I click on the tab title. If i click anywhere else inside the tab other than the title then it doesn't recognize the click. How can i make a listener to listen to click anywhere on that tab not just the tab title.

[Karu]

I apologize that I was not able to explain my question clearly. What I meant is that, is it possible to move the click listener at <ngb-tab> level. Because the ng-template div is not covering up the entire tab. the ng-template div click listener only works if the mouse pointer is right on the tab title "Active". If the mouse is slightly away from the title but still inside the tab, the click listener doesn't work. I tried <ng-tab select="fetchNews('active')" >but that didnt work. I have also tried <ng-tab (click)="fetchNews('active')"

[yurzui]

I added click to table. It is inside tab

[yurzui]

I've just notices that a tag inside tab has paddings. Check this plunker plnkr.co/edit/rr1j5EBZQVLkAXRQSbF0?p=preview I added custom class to tab to add some styles.

[Whisher]

Just a simple improvement is to add an id on ngb-tab like ngb-tab id="tab-selectbyid1"

[jarodsmk]

Yea, also recommend adding the [id] input on the ngb-tabset. Also, ngbTabSet has been deprecated as of ngBootstrap 6.0.0

[Steve]

I tried this as is and simply doesn't fire the click event