Use the wj-tab-panel directive to add TabPanel to your AngularJS applications. Note that directive and parameter names must be formatted as lower-case with dashes instead of camel-case. For example:

<wj-tab-panel>
   <wj-tab>
     <a>Tab1 Header</a>
     <div>
         Tab1 content
     </div>
   </wj-tab>
   <wj-tab is-disabled="true">
     <a>Tab2 Header</a>
     <div>
         Tab2 content
     </div>
   </wj-tab>
</wj-tab-panel>

The wj-tab-panel directive supports the following attributes:

is-animated

@A value that determines whether tab changes should be animated with a fade-in effect.

auto-switch

@ A value that determines whether the control should switch tabs automatically when the user selects a tab using the arrow keys.

control

= A reference to the TabPanel control created by this directive.

selected-index

= The index of the currently selected (active) tab.

selected-tab

= The Tab object that is currently selected.

initialized

& This event occurs after the binding has finished initializing the control with attribute values.

is-initialized

= A value indicating whether the binding has finished initializing the control with attribute values.

selected-index-changed

& The TabPanel.selectedIndexChanged event handler.

The wj-tab-panel directive may contain one or more wijmo.angular.nav.WjTab directives.