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>

score 27 · Answer 1 · answered Dec 09 '17 at 15:13

27

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>

answered Dec 09 '17 at 15:13

user1752112

271
3
4

1

Just a simple improvement is to add an id on ngb-tab like ngb-tab id="tab-selectbyid1" – Whisher Aug 14 '18 at 08:24
Yea, also recommend adding the [id] input on the ngb-tabset. Also, ngbTabSet has been deprecated as of ngBootstrap 6.0.0 – jarodsmk Feb 25 '20 at 11:34

yurzui · Accepted Answer · 2017-05-09T19:42:55.763

25

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>

edited May 09 '17 at 19:42

answered May 09 '17 at 19:21

yurzui

205,937
32
433
399

2

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 May 09 '17 at 19:40
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 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 but that didnt work. I have also tried – Karu May 10 '17 at 12:14
I added click to table. It is inside tab – yurzui May 10 '17 at 12:17
1

I've just notices that `a` tag inside tab has paddings. Check this plunker https://plnkr.co/edit/rr1j5EBZQVLkAXRQSbF0?p=preview I added custom class to tab to add some styles. – yurzui May 11 '17 at 10:51
I tried this as is and simply doesn't fire the click event – Steve Aug 17 '21 at 17:01

score 6 · Answer 3 · edited Nov 07 '19 at 11:41

In Html, You have to add tabChange Event, in ngb-tabset tag
Set unique id in event ngb-tab
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
    }
}

score 1 · Answer 4 · answered Apr 05 '19 at 08:08

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)">

score 0 · Answer 5 · answered Jun 08 '18 at 07:26

Simple solution: :

Use ngbTabTitle like below .. and you can trigger an event from here like below code

 <ngb-tabset>
      <ngb-tab  >
          <ng-template ngbTabTitle>
              <div (click)="getTransactionList()">Transactions</div>
          </ng-template>

        <ng-template ngbTabContent >
          <table class="custom-table">
            <thead>
              <tr>
                <th>TransactionID</th>
                <th>Sender</th>
                <th>Recipient</th>
                <th>Time</th>
                <th>Amount</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let Transaction of getTransactions | slice:0:10; let i=index">
                <td>{{Transaction.id}}</td>
                <td>{{Transaction.senderId}}</td>
                <td>{{Transaction.recipientId}}</td>
                <td>{{Transaction.timestamp}}</td>
                <td>{{Transaction.amount}}</td>
              </tr>
            </tbody>
          </table>
        </ng-template>
      </ngb-tab>


      <ngb-tab>
               // your code 
     </ngb-tab>

     <ngb-tab>
               // your code 
     </ngb-tab>

<ngb-tabset>

RUPAM BASAK · Answer 6 · 2019-12-10T05:49:17.883

its a simple css trick you can apply like this. Modifying user1752112's answer a little bit.

<ngb-tab>
  <ng-template ngbTabTitle>
      <div style="padding: 8px 10px;" (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>

in your css file use this.

::ng-deep .nav-tabs .nav-link {
    padding: 0 !important;
}

score 0 · Answer 7 · edited Sep 06 '20 at 05:19

0

If you using Angular 6,8. Please use (select)="tabSelected()".

edited Sep 06 '20 at 05:19

Arghya Sadhu

41,002
9
78
107

answered Sep 06 '20 at 04:24

Sandeep Krishna

119
1
7

score 0 · Answer 8 · answered Aug 17 '21 at 17:09

For Angular 11, use (selectTab)

<tabset>
  <tab (selectTab)="doSomething()">
    <ng-template tabHeading>
      <fa-icon [icon]="['fas', 'copy']"></fa-icon>
    </ng-template>
    <foo1-tab></foo1-tab>
  </tab>
  <tab>
    <ng-template tabHeading>
      <fa-icon [icon]="['fas', 'cogs']"></fa-icon>
    </ng-template>
    <foo2-tab></foo2-tab>
  </tab>
</tabset>

Click listener when tab is clicked - angular2 and ng bootstrap

8 Answers8