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!
Anil Mathew 's gravatar image asked Jan 11 2017 at 10:20 in Angularjs by Anil Mathew

2 Answers

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
Sander Elias 's gravatar image answered Jan 11 2017 at 20:43 by Sander Elias
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
Anil Mathew 's gravatar image answered Jan 12 2017 at 12:08 by Anil Mathew

Related Discussions

  • [AngularJS] Raise OnChange/Click Event In Kendogrid Using Angular2 in Angularjs

  • I have built a grid using kendogrid wrapped-up with angular2. the grid is getting populated with records by consuming the webapi service. I need to raise a rowclick event on the grid and on the click event, I need to fetch the record/async call to get the details for the row/record selected and display below on details section the same page. The details sections consists of around 10-12 ...

  • [AngularJS] Angular2 With Angular.sfx.dev.js in Angularjs

  • I want to use single Angular2 Javascript file in my project. I found that angular.sfx.dev.js does the work, however most of the example are on Typescript & I find difficulty in hooking LifeCycle events & calling angular2 function from outside. Please check https://jsfiddle.net/yppoa14c/1/ & let me know what is the correct way to receive alert message from fiddle at different lifecycle ...

  • [AngularJS] Angular2 With Angular.sfx.dev.js in Angularjs

  • I want to use single javascript file for Angular2 in my project & I found that Angular2 provides angular.sfx.dev.js. I found one jsfiddle https://jsfiddle.net/langdonx/n5pjgev6/ which demonstrate use of it. I found that there are lot of example in typescript but *very less using * *angular.sfx.dev.js*. Examples for Lifecycle, & NgZone (call angular2 function from outside using old js/jquery...

  • [AngularJS] Angular2 With Dojo in Angularjs

  • Hi, My application is primarily build using DOJO , we are planning to face off Dojo and move to Angular 2. We are planning to take few components at a time . Currently I have dojo Widget with would internally host Angular Module . Everything works fine . But i realized that with dojoWidget is destroyed Angular Module ( and its components) are not destroyed. Is there a way to force...

  • [AngularJS] Angular2 With MVC5 in Angularjs

  • Hello Members, Can you please guide me.... I am going to use Angular2 with MVC5. Is good with to start with angular2 ? Can any one provide me a link regarding this You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected] To post to...

  • [AngularJS] Angular2 With Credentials In Http Request in Angularjs

  • I am facing cross domain issue. How do I set withCredentials true for template url request. I am using angular2 Beta Version with Javascript You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected] To post to this group, send email to...

  • [AngularJS] Integrating UniteGalley With Angular2 in Angularjs

  • I am trying to integrate UniteGallery (https://github.com/vvvmax/unitegallery/) with Angular2. Below is the code notice the tag has "*data-image*" tag which UniteGallery uses to display images: For some reason my angular2 binding {{image.url}} is not working and errors out with "*cannot bind with* *data-image*". jQuery("#image-gallery").unitegallery...

  • [AngularJS] Angular Translate With Angular2 in Angularjs

  • Hi all, Is it possible to use angular translate with angular2? If i want to use an application which is in the process of upgrading and let's say that we can't even upgrade a part of the application. Is it still possible to use angular translate with angular2? Thanks, David You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe...

  • [AngularJS] Event Binding In Angular2 With Vanilla Javascript in Angularjs

  • I am using Angular2 and would like to stick to using vanilla javascript. Does anybody know how to achieve event binding with vanilla javascript? You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected] To post to this group, send email...

  • [AngularJS] Nested Directives In Angular2 in Angularjs

  • *It is possible to make sub directives of directive in angularjs 2? i'm just trying to build nested directives in Angular2. You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected] To post to this group, send email to [email protected]..

  • [AngularJS] Accordian Control In Angular2 in Angularjs

  • Hello, Is there any way to create Accordian using Angular2 created using CLI ? You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected] To post to this group, send email to [email protected] Visit this group at https://groups...

  • [AngularJS] Post Data In Angular2 in Angularjs

  • down votefavorite I am facing the issue of json being added to the url after calling the service to add the data. below is my file JobBookingComponent.ts CreateNew(): void { this.router.navigate(['/detail', 0]);} JobDetailsComponent.ts Submit() { let templateId; this.route.params.subscribe( (param: any) => { templateId = +param['templateid...

  • [AngularJS] Injecting Header Token With All REST API Calls In Angular2 in Angularjs

  • Hi, I am using Angular2 and I am trying to find a way to send some header to the server for every REST API call? I am trying to avoid writing code to set the header for each API call though. Can anyone please help me how to do this? Thanks You received this message because you are subscribed to the Google Groups "Angular" group. To unsubscribe from this group and stop receiving...

  • [AngularJS] In Angular2, Difference Between Angular2 & @angular in Angularjs

  • I am new to angular2. I Confused between angular2 & @angular when I am Importing. Anyone explain b/w the details.? You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected] To post to this group, send email to [email protected] ...

  • [AngularJS] Creating New D3 Component DOM Object For Every Click Of Menu Item In Angular2 in Angularjs

  • I tried creating a bubblechart using D3 in Angular2 component. I want this bubblechart to be loaded on click of menu. the Menu is built using the Angular2 routing, the menu routing works fine for all the other menus placed under it. Like any other menu I have linked the bubblechart component also under it. But the problem I am facing is whenever I click the bubblechart link, it internally...

  • [AngularJS] How To Pass The Current Tag Instance To The Events In Angular2 in Angularjs

  • I have a left sidebar menu which is populated by and tag elements. I have handled the menu click event to exapnd/collapse the submenu items. The problem I am facing here is I am not able to pass/identify the current instance of the tag element to do the expand/collapse i.e. If i expand a particular menu item all the other menus items are also getting affected. How do i handle this issue...

  • [AngularJS] Can I Use Angular2 With Cdn And No Transpile In Pure Js? in Angularjs

  • I want to develop angular2 just as angularjs and write all code directly in Is it possible in angular2 ? I wish there could be some tutorial and angular2 on google hosted library You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]..

  • [AngularJS] Need Inputs On Calling Jquery From Angular2 in Angularjs

  • I have built a grid using kendogrid wrapped with angular2. the grid is getting populated with records by consuming the webapi service. Moreover I need to raise a rowclick event on the grid and on the click event, I need to fetch the record/async call to get the details for the row/record selected and display below on the same page. The details sections consists of around 10-12 textboxes...

  • [AngularJS] Bootstrap Doesn't Working With Angular2 Components in Angularjs

  • CSS/Bootstrap doesn't work when it is rendered in a angular2 component. If I try to render the html contents in Index.html file (with proper references for CSS,JS) the application/functionality works fine. But when the same html contents along with CSS classes is rendered in the angular2 component, it doesnt work. Based on the searches on internet I have done all these changes but nothing...

  • [AngularJS] [Angular2] Component With Input Observable in Angularjs

  • Hi, I'm not sure if this should work but I didn't manage to. I want to create a component with input property which is an observable. In my Component I subscribe to the observable in the ngOnInit but when I generate a value on the Source in the parent component I don't have any event in my child component but it works in my parent component. I tried to create a plunker, but I'm not very...