ngb-tabset with events(click) in angular2

4,250 views
Skip to first unread message

Anil Mathew

unread,
Jan 11, 2017, 1:20:35 PM1/11/17
to Angular
I am using "ngb-tabset" to display tabs in the angular2. I am trying to add an event to a tab like below:

 <ngb-tabset>
        <ngb-tab title="Profile" (click)="callMyFunction()">
             
        </ngb-tab>
 <ngb-tabset>

I can't figure out why the above click function is not calling my function. Can someone please help?

Thanks!

Sander Elias

unread,
Jan 11, 2017, 11:43:55 PM1/11/17
to Angular
Hi Anil,


Did you define "callMyFunction" on the ngb-tab-title components controller? If not, the click is probably handled by the ngb tabs system.
you can add your own clickhandler inside a ngbTabTitle template like this:

<ngb-tabset>
   
<template ngbTabTitle> <span (click)="callMyFunction()">Profile</span></template>
<ngb-tabset>

As documented in the excellent ngBootstrap documentation! 

Regards
Sander

Anil Mathew

unread,
Jan 12, 2017, 3:08:17 PM1/12/17
to Angular
Thank you Sanders!

In fact the issue was the event name. i.e it should like below:

 <ngb-tabset (tabChange)="getStudentGrades()">

And I was trying with (change), (click) etc..

Anil
Reply all
Reply to author
Forward
0 new messages