# Wijmo_Angular_Nav.Wjtabpanel ## Content

WjTabPanel Class

AngularJS directive for the TabPanel control.

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.

Heirarchy