I'm using ng-bootstrap as a substitute for ui-bootstrap in angular2.
My html is as follows:
<div class="row" style="height: 100%;">
<div class="col-12">
<div class="container" id="contentMain">
<div class="card-my-profile">
<div class="card-image">
<div class="image-wrap">
<div class="image-placholder" data-firstletter="S"></div>
</div>
</div>
<div class="clearfix card-fluid">
<div class="">
<h4 class="title-card">Priya</h4>
<div><span class="item-type">Title:</span> Job title</div>
<div><span class="item-type">Location:</span> Bangalore</div>
</div>
<div class="">
<div><span class="item-type">Contact:</span> 9876543210</div>
<div><span class="item-type">Email:</span> priya@gmail.com</div>
<div><span class="item-type">Experience:</span> 9 years</div>
</div>
</div>
<div class="card-buttons">
<a href class="btn btn-success btn-rounded text-uppercase">Resume <i class="bi_interface-tick small"></i> </a>
<div class="text-right">
<a class="inherit small" href>Update?</a>
</div>
<a [hidden]="!isNotUploaded" href class="btn btn-default btn-rounded text-uppercase">Upload CV</a>
<ul class="list-inline list-icons">
<li>
<a href target='_blank' class="btn-icon btn-twitter btn-unlinked">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href target='_blank' class="btn-icon btn-linkedin">
<i class="fa fa-linkedin"></i>
</a>
</li>
</ul>
</div>
</div>
<ngb-tabset class="tabs-bordered">
<ngb-tab index="0">
<template ngbTabTitle><i class="bi_doc-briefcase-a"></i> My jobs</template>
<div class="clearfix">
<ngb-tabset>
<ngb-tab heading="Recommendations">
<div class="row row-slim">
<div class="col-md-6" *ngFor="let i of tmpArr">
<div data-ng-init="card.isRecommended = true" class="panel card-job-listing">
<div class="section-fixed left">
<div class="icon-category">
<i class="bi_web-code"></i>
</div>
</div>
<div class="section-fluid">
<h5 class="title-card">Sales / Business Development</h5>
<div class="subtitle-card">Bangalore</div>
<div class="mini">5-7yrs</div>
<div class="fix-bottom" *ngIf="card.isRecommended">
<a class="inherit" (click)="updateSkillsForRecommendations()" href><i class="bi_interface-circle-cross"></i></a>
</div>
</div>
<div class="section-fixed right">
<a class="btn-favorite" [ngClass]="{'active': card.isFavorite }" href>
<i class="fa"></i>
</a>
<a href="/#/job-description" class="btn btn-default btn-sm btn-action" [hidden]="card.isApplied">VIEW</a>
<span class="label-bordered label-cyan" [hidden]="!card.isApplied">Applied</span>
</div>
</div>
</div>
</div>
</ngb-tab>
<ngb-tab heading="Applications">
<div class="row row-slim">
<div class="col-md-6" *ngFor="let i of tmpArr">
<div class="panel card-job-listing with-timeline" data-ng-init="isCollapsed = true;card.isApplied = true">
<div class="panel-body">
<div class="section-fixed left">
<div class="icon-category">
<i class="bi_web-code"></i>
</div>
</div>
<div class="section-fluid">
<h5 class="title-card">Sales / Business Development</h5>
<div class="subtitle-card">Bangalore</div>
<div class="mini">5-7yrs</div>
<div class="fix-bottom" *ngIf="card.isRecommended">
<a class="inherit" href><i class="bi_interface-circle-cross"></i></a>
</div>
</div>
<div class="section-fixed right">
<!-- <a class="btn-favorite" [ngClass]="{'active': card.isFavorite }" href>
<i class="fa"></i>
</a> -->
<a href="/#/job-description" class="btn btn-default btn-sm btn-action" [hidden]="card.isApplied">VIEW</a>
<span class="label-bordered label-cyan" [hidden]="!card.isApplied">Applied</span>
<a class="btn-viewall small" href (click)="isCollapsed = !isCollapsed">
<span [hidden]="!isCollapsed">View status</span>
<span [hidden]="isCollapsed">Hide status</span>
</a>
</div>
</div>
<div class="panel-footer section-timeline" uib-collapse="isCollapsed">
<div>
<div class="mobile-show">Current status: Screening in progress</div>
<ul class="list-unstyled list-timeline mobile-hide">
<li>
<div class="timeline-icon success"><i class="bi_interface-tick"></i></div>
<div class="timeline-name">Screening in progress</div>
</li>
<li>
<div class="timeline-icon success"><i class="bi_interface-tick"></i></div>
<div class="timeline-name">Selected for Interview</div>
<!-- <div class="timeline-name">Application Screening - Not considered</div> -->
</li>
<li>
<div class="timeline-icon current">3</div>
<div class="timeline-name">Interview / Assessment in progress</div>
</li>
<li>
<div class="timeline-icon failure">4</div>
<!-- <div class="timeline-name">Interview / Assessment - Selected</div> -->
<div class="timeline-name">Interview / Assessment - Not considered</div>
</li>
<li>
<div class="timeline-icon">5</div>
<div class="timeline-name">Job offered</div>
</li>
</ul>
</div>
<!-- <div class="text-right small">
<a href (click)="isCollapsed = !isCollapsed">View status</a>
</div> -->
</div>
</div>
</div>
</div>
</ngb-tab>
<ngb-tab heading="Favorite jobs">
<div class="row row-slim">
<div class="col-md-6" *ngFor="let i of tmpArr" data-ng-init="card.isFavorite = true">
<div class="panel card-job-listing">
<div class="section-fixed left">
<div class="icon-category">
<i class="bi_web-code"></i>
</div>
</div>
<div class="section-fluid">
<h5 class="title-card">Sales / Business Development</h5>
<div class="subtitle-card">Bangalore</div>
<div class="mini">5-7yrs</div>
<div class="fix-bottom" *ngIf="card.isRecommended">
<a class="inherit" (click)="templateRef.updateSkillsForRecommendations()" href><i class="bi_interface-circle-cross"></i></a>
</div>
</div>
<div class="section-fixed right">
<a class="btn-favorite" [ngClass]="{'active': card.isFavorite }" href>
<i class="fa"></i>
</a>
<a href="/#/job-description" class="btn btn-default btn-sm btn-action" [hidden]="card.isApplied">VIEW</a>
<span class="label-bordered label-cyan" [hidden]="!card.isApplied">Applied</span>
</div>
</div>
</div>
</div>
</ngb-tab>
</ngb-tabset>
</div>
</ngb-tab>
<ngb-tab index="1">
<template ngbTabTitle><i class="bi_doc-bookmark"></i> My bookmarks</template>
<div class="clearfix">
<ngb-tabset>
<ngb-tab heading="Skills">
<div class="row">
<div class="col-sm-6">
<form novalidate>
<div class="form-group flex-center">
<input type="text" class="form-control" placeholder="Search skill">
<button class="btn btn-link"><i class="bi_interface-circle-plus"></i></button>
</div>
</form>
</div>
</div>
<ul class="list-inline">
<li class="tag bookmarked-tag" ngb-dropdown auto-close="outsideClick"
*ngFor="let item of tmpArr1;let $index=index;">
<a href ngb-dropdown-toggle id="desiredSkill{{$index}}">
<i class="bi_interface-tick icon-bookmark"></i>
SKill {{$index + 1}} <i class="bi_interface-more tag-menu-icon"></i>
</a>
<ul class="dropdown-menu tag-menu" ngb-dropdown-menu [attr.aria-labelledby]="'desiredSkill'+$index">
<li>
<a href>Unfollow</a>
</li>
<li>
<a href>Related Jobs</a>
</li>
</ul>
</li>
</ul>
</ngb-tab>
<ngb-tab heading="Courses">
<section class="learning-carousel pad-t-1 row">
<div class="course-card panel col-lg-10 col-lg-offset-1 col-md-8 col-md-offset-2">
<a href class="btn-favorite pull-right"><i class="fa"></i></a>
<img src="http://www.underconsideration.com/brandnew/archives/udacity_logo.png" width="85px" />
<p class="course-title">
Intro to Hadoop and MapReduce for Beginners | Udacity
</p>
<p class="course-description">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
</section>
</ngb-tab>
</ngb-tabset>
</div>
</ngb-tab>
</ngb-tabset>
</div>
</div>
</div>
But after rendering it throws following error:
"TypeError: Cannot read property 'templateRef' of undefined
at DebugAppView._View_NgbTabset4.detectChangesInternal (NgbTabset.ngfactory.js:387:59)
at DebugAppView.AppView.detectChanges (http://localhost:8080/vendor.bundle.js:33036:14)
at DebugAppView.detectChanges (http://localhost:8080/vendor.bundle.js:33141:44)
at DebugAppView.AppView.detectContentChildrenChanges (http://localhost:8080/vendor.bundle.js:33054:19)
at DebugAppView._View_NgbTabset3.detectChangesInternal (NgbTabset.ngfactory.js:331:8)
at DebugAppView.AppView.detectChanges (http://localhost:8080/vendor.bundle.js:33036:14)
at DebugAppView.detectChanges (http://localhost:8080/vendor.bundle.js:33141:44)
at DebugAppView.AppView.detectContentChildrenChanges (http://localhost:8080/vendor.bundle.js:33054:19)
at DebugAppView._View_NgbTabset0.detectChangesInternal (NgbTabset.ngfactory.js:120:8)
at DebugAppView.AppView.detectChanges (http://localhost:8080/vendor.bundle.js:33036:14)
at DebugAppView.detectChanges (http://localhost:8080/vendor.bundle.js:33141:44)
at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:8080/vendor.bundle.js:33062:19)
at DebugAppView._View_MyProfile0.detectChangesInternal (MyProfile.ngfactory.js:980:8)
at DebugAppView.AppView.detectChanges (http://localhost:8080/vendor.bundle.js:33036:14)
at DebugAppView.detectChanges (http://localhost:8080/vendor.bundle.js:33141:44)
at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:8080/vendor.bundle.js:33062:19)
at DebugAppView._View_MyProfile_Host0.detectChangesInternal (MyProfile_Host.ngfactory.js:30:8)
at DebugAppView.AppView.detectChanges (http://localhost:8080/vendor.bundle.js:33036:14)
at DebugAppView.detectChanges (http://localhost:8080/vendor.bundle.js:33141:44)
at DebugAppView.AppView.detectContentChildrenChanges (http://localhost:8080/vendor.bundle.js:33054:19)
at DebugAppView._View_AppComponent0.detectChangesInternal (AppComponent.ngfactory.js:535:8)
at DebugAppView.AppView.detectChanges (http://localhost:8080/vendor.bundle.js:33036:14)
at DebugAppView.detectChanges (http://localhost:8080/vendor.bundle.js:33141:44)
at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:8080/vendor.bundle.js:33062:19)
at DebugAppView._View_AppComponent_Host0.detectChangesInternal (AppComponent_Host.ngfactory.js:31:8)
at DebugAppView.AppView.detectChanges (http://localhost:8080/vendor.bundle.js:33036:14)
at DebugAppView.detectChanges (http://localhost:8080/vendor.bundle.js:33141:44)
at ViewRef_.detectChanges (http://localhost:8080/vendor.bundle.js:33528:20)
at http://localhost:8080/vendor.bundle.js:26332:84
at Array.forEach (native)
at ApplicationRef_.tick (http://localhost:8080/vendor.bundle.js:26332:38)
at http://localhost:8080/vendor.bundle.js:26273:105
at ZoneDelegate.invoke (http://localhost:8080/polyfills.bundle.js:7259:26)
at Object.onInvoke (http://localhost:8080/vendor.bundle.js:36115:37)
at ZoneDelegate.invoke (http://localhost:8080/polyfills.bundle.js:7258:32)
at Zone.run (http://localhost:8080/polyfills.bundle.js:7141:43)
at NgZone.run (http://localhost:8080/vendor.bundle.js:36005:62)
at Object.next (http://localhost:8080/vendor.bundle.js:26273:81)
at SafeSubscriber.schedulerFn [as _next] (http://localhost:8080/vendor.bundle.js:30651:52)
at SafeSubscriber.__tryOrUnsub (http://localhost:8080/vendor.bundle.js:54373:16)
at SafeSubscriber.next (http://localhost:8080/vendor.bundle.js:54322:22)
at Subscriber._next (http://localhost:8080/vendor.bundle.js:54275:26)
at Subscriber.next (http://localhost:8080/vendor.bundle.js:54239:18)
at EventEmitter.Subject.next (http://localhost:8080/vendor.bundle.js:53991:25)
at EventEmitter.emit (http://localhost:8080/vendor.bundle.js:30643:76)
at NgZone.checkStable (http://localhost:8080/vendor.bundle.js:36083:40)
at NgZone.setHasMicrotask (http://localhost:8080/vendor.bundle.js:36154:14)
at Object.onHasTask (http://localhost:8080/vendor.bundle.js:36127:31)
at ZoneDelegate.hasTask (http://localhost:8080/polyfills.bundle.js:7320:33)
at ZoneDelegate._updateTaskCount (http://localhost:8080/polyfills.bundle.js:7337:26)
at ZoneDelegate.invokeTask (http://localhost:8080/polyfills.bundle.js:7297:26)
at Zone.runTask (http://localhost:8080/polyfills.bundle.js:7181:47)
at drainMicroTaskQueue (http://localhost:8080/polyfills.bundle.js:7428:35)
at HTMLAnchorElement.ZoneTask.invoke (http://localhost:8080/polyfills.bundle.js:7366:25)
------------- Elapsed: 8 ms; At: Sun Oct 23 2016 20:40:21 GMT-0700 (Pacific Daylight Time) -------------
at Object.onScheduleTask (http://localhost:8080/polyfills.bundle.js:6946:18)
at ZoneDelegate.scheduleTask (http://localhost:8080/polyfills.bundle.js:7269:49)
at Zone.scheduleMicroTask (http://localhost:8080/polyfills.bundle.js:7195:39)
at scheduleResolveOrReject (http://localhost:8080/polyfills.bundle.js:7527:14)
at resolvePromise (http://localhost:8080/polyfills.bundle.js:7490:21)
at http://localhost:8080/polyfills.bundle.js:7472:13
at http://localhost:8080/vendor.bundle.js:51228:25
at ZoneDelegate.invoke (http://localhost:8080/polyfills.bundle.js:7259:26)
at Object.onInvoke (http://localhost:8080/vendor.bundle.js:36115:37)
at ZoneDelegate.invoke (http://localhost:8080/polyfills.bundle.js:7258:32)
at Zone.run (http://localhost:8080/polyfills.bundle.js:7141:43)
at http://localhost:8080/polyfills.bundle.js:7529:57
at ZoneDelegate.invokeTask (http://localhost:8080/polyfills.bundle.js:7292:35)
at Object.onInvokeTask (http://localhost:8080/vendor.bundle.js:36106:37)
at ZoneDelegate.invokeTask (http://localhost:8080/polyfills.bundle.js:7291:40)
at Zone.runTask (http://localhost:8080/polyfills.bundle.js:7181:47)
at drainMicroTaskQueue (http://localhost:8080/polyfills.bundle.js:7428:35)
at HTMLAnchorElement.ZoneTask.invoke (http://localhost:8080/polyfills.bundle.js:7366:25)
------------- Elapsed: 0 ms; At: Sun Oct 23 2016 20:40:21 GMT-0700 (Pacific Daylight Time) -------------
at Object.onScheduleTask (http://localhost:8080/polyfills.bundle.js:6946:18)
at ZoneDelegate.scheduleTask (http://localhost:8080/polyfills.bundle.js:7269:49)
at Zone.scheduleMicroTask (http://localhost:8080/polyfills.bundle.js:7195:39)
at scheduleResolveOrReject (http://localhost:8080/polyfills.bundle.js:7527:14)
at ZoneAwarePromise.then (http://localhost:8080/polyfills.bundle.js:7613:17)
at http://localhost:8080/vendor.bundle.js:51206:18
at new ZoneAwarePromise (http://localhost:8080/polyfills.bundle.js:7545:29)
at Router.runNavigate (http://localhost:8080/vendor.bundle.js:51152:16)
at http://localhost:8080/vendor.bundle.js:51143:67
at ZoneDelegate.invoke (http://localhost:8080/polyfills.bundle.js:7259:26)
at Object.onInvoke (http://localhost:8080/vendor.bundle.js:36115:37)
at ZoneDelegate.invoke (http://localhost:8080/polyfills.bundle.js:7258:32)
at Zone.run (http://localhost:8080/polyfills.bundle.js:7141:43)
at http://localhost:8080/polyfills.bundle.js:7529:57
at ZoneDelegate.invokeTask (http://localhost:8080/polyfills.bundle.js:7292:35)
at Object.onInvokeTask (http://localhost:8080/vendor.bundle.js:36106:37)
at ZoneDelegate.invokeTask (http://localhost:8080/polyfills.bundle.js:7291:40)
at Zone.runTask (http://localhost:8080/polyfills.bundle.js:7181:47)
at drainMicroTaskQueue (http://localhost:8080/polyfills.bundle.js:7428:35)
at HTMLAnchorElement.ZoneTask.invoke (http://localhost:8080/polyfills.bundle.js:7366:25)
------------- Elapsed: 87 ms; At: Sun Oct 23 2016 20:40:21 GMT-0700 (Pacific Daylight Time) -------------
at Object.onScheduleTask (http://localhost:8080/polyfills.bundle.js:6946:18)
at ZoneDelegate.scheduleTask (http://localhost:8080/polyfills.bundle.js:7269:49)
at Zone.scheduleMicroTask (http://localhost:8080/polyfills.bundle.js:7195:39)
at scheduleResolveOrReject (http://localhost:8080/polyfills.bundle.js:7527:14)
at ZoneAwarePromise.then (http://localhost:8080/polyfills.bundle.js:7613:17)
at Router.scheduleNavigation (http://localhost:8080/vendor.bundle.js:51143:34)
at Router.navigateByUrl (http://localhost:8080/vendor.bundle.js:51087:25)
at RouterLinkWithHref.onClick (http://localhost:8080/vendor.bundle.js:49996:21)
at DebugAppView._View_AppComponent0._handle_click_59_0 (AppComponent.ngfactory.js:764:45)
at http://localhost:8080/vendor.bundle.js:33168:24
at http://localhost:8080/vendor.bundle.js:46650:36
at http://localhost:8080/vendor.bundle.js:46752:111
at ZoneDelegate.invoke (http://localhost:8080/polyfills.bundle.js:7259:26)
at Object.onInvoke (http://localhost:8080/vendor.bundle.js:36115:37)
at ZoneDelegate.invoke (http://localhost:8080/polyfills.bundle.js:7258:32)
at Zone.runGuarded (http://localhost:8080/polyfills.bundle.js:7155:47)
at NgZone.runGuarded (http://localhost:8080/vendor.bundle.js:36010:69)
at HTMLAnchorElement.outsideHandler (http://localhost:8080/vendor.bundle.js:46752:79)
at ZoneDelegate.invokeTask (http://localhost:8080/polyfills.bundle.js:7292:35)
at Zone.runTask (http://localhost:8080/polyfills.bundle.js:7181:47)
at HTMLAnchorElement.ZoneTask.invoke (http://localhost:8080/polyfills.bundle.js:7362:33)"
As I observed:
Both ngbTabTitle and ngbTabContent should be defined.
If I'm using template tag it should be as follows:
<ngb-tab>
<template ngbTabTitle>
SKILLS
</template>
<template ngbTabContent>
.......
</template>
</ngb-tab>
else title can be used as follows:
<ngb-tabset>
<ngb-tab title="foo" id="1"><template ngbTabContent>Foo</template></ngb-tab>
<ngb-tab title="bar" id="2"><template ngbTabContent>Bar</template></ngb-tab>
</ngb-tabset>