UNPKG

carbon-components-angular

Version:
1,901 lines 104 kB
<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>carbon-components-angular documentation</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="icon" type="image/x-icon" href="../images/favicon.ico">
	    <link rel="stylesheet" href="../styles/style.css">
    </head>
    <body>

        <div class="navbar navbar-default navbar-fixed-top visible-xs">
            <a href="../" class="navbar-brand">carbon-components-angular documentation</a>
            <button type="button" class="btn btn-default btn-menu fa fa-bars" id="btn-menu"></button>
        </div>

        <div class="xs-menu menu" id="mobile-menu">
            <div id="book-search-input" role="search">
                <input type="text" placeholder="Type to search">
            </div>
            <nav>
            
                <ul class="list">
            
                    <li class="title">
                        <a href="../index.html">carbon-components-angular documentation</a>
                    </li>
            
                    <li class="divider"></li>
            
            
                    <li class="chapter">
                        <a data-type="chapter-link" href="../index.html"><span class="fa fa-home"></span>Getting started</a>
                        <ul class="links">
                                <li class="link">
                                    <a 
                                        
                                         href="../overview.html" 
                                         href="../overview.html" 
                                        >
                                        <span class="fa fa-th"></span>Overview
                                    </a>
                                </li>
                                <li class="link">
                                  <a href="../index.html" ><span class="fa fa-file-text-o"></span>README</a>
                                </li>
                                <li class="link">
                                        <a href="../changelog.html"
                                    >
                                        <span class="fa fa-file-text-o"></span>CHANGELOG
                                    </a>
                                </li>
                                <li class="link">
                                        <a href="../license.html"
                                    >
                                        <span class="fa fa-file-text-o"></span>LICENSE
                                    </a>
                                </li>
                        </ul>
                    </li>
            
            
                    <li class="chapter">
                        <a data-type="chapter-link" href="../modules.html" >
                            <div class="menu-toggler linked" data-toggle="collapse"
                                    data-target="#xs-modules-links"
                            >
                                <span class="fa fa-archive"></span>
                                <span class="link-name">Modules</span>
                                <span class="fa fa-angle-down"></span>
                            </div>
                        </a>
                        <ul class="links collapse "
                                id="xs-modules-links"
                            >
                                <li class="link">
                                    <a href="../modules/AccordionModule.html" >AccordionModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/BannerModule.html" >BannerModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/ButtonModule.html" >ButtonModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/CalendarModule.html" >CalendarModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/CheckboxModule.html" >CheckboxModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/CodeSnippetModule.html" >CodeSnippetModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/ComboBoxModule.html" >ComboBoxModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/ContentSwitcherModule.html" >ContentSwitcherModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/DialogModule.html" >DialogModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/DropdownModule.html" >DropdownModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/I18nModule.html" >I18nModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/IconModule.html" >IconModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/InputModule.html" >InputModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/LinkModule.html" >LinkModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/ListGroupModule.html" >ListGroupModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/LoadingModule.html" >LoadingModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/ModalModule.html" >ModalModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/NFormsModule.html" >NFormsModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/NotificationModule.html" >NotificationModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/PaginationModule.html" >PaginationModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/PillInputModule.html" >PillInputModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/PlaceholderModule.html" >PlaceholderModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/ProgressIndicatorModule.html" >ProgressIndicatorModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/RadioModule.html" >RadioModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/SampleModule.html" >SampleModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/SelectModule.html" >SelectModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/StaticIconModule.html" >StaticIconModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/SwitchModule.html" >SwitchModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/TableModule.html" >TableModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/TabsModule.html" >TabsModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/TilesModule.html" >TilesModule</a>
                                </li>
                                <li class="link">
                                    <a href="../modules/ToggleModule.html" >ToggleModule</a>
                                </li>
                        </ul>
                    </li>
            
                    <li class="chapter">
                        <div class="simple menu-toggler" data-toggle="collapse"
                                data-target="#xs-components-links"
                            >
                            <span class="fa fa-cogs"></span>
                            <span>Components</span>
                            <span class="fa fa-angle-down"></span>
                        </div>
                        <ul class="links collapse "
                                id="xs-components-links"
                            >
                                <li class="link">
                                    <a href="../components/Accordion.html" >Accordion</a>
                                </li>
                                <li class="link">
                                    <a href="../components/AccordionItem.html" >AccordionItem</a>
                                </li>
                                <li class="link">
                                    <a href="../components/AlertModal.html" >AlertModal</a>
                                </li>
                                <li class="link">
                                    <a href="../components/AlertModalStory.html" >AlertModalStory</a>
                                </li>
                                <li class="link">
                                    <a href="../components/Banner.html" >Banner</a>
                                </li>
                                <li class="link">
                                    <a href="../components/Calendar.html" >Calendar</a>
                                </li>
                                <li class="link">
                                    <a href="../components/CalendarHeader.html" >CalendarHeader</a>
                                </li>
                                <li class="link">
                                    <a href="../components/CalendarMonth.html" >CalendarMonth</a>
                                </li>
                                <li class="link">
                                    <a href="../components/CalendarMonths.html" >CalendarMonths</a>
                                </li>
                                <li class="link">
                                    <a href="../components/CalendarQuarter.html" >CalendarQuarter</a>
                                </li>
                                <li class="link">
                                    <a href="../components/CalendarYear.html" >CalendarYear</a>
                                </li>
                                <li class="link">
                                    <a href="../components/Checkbox.html" >Checkbox</a>
                                </li>
                                <li class="link">
                                    <a href="../components/ClickableTile.html" >ClickableTile</a>
                                </li>
                                <li class="link">
                                    <a href="../components/CodeSnippet.html" >CodeSnippet</a>
                                </li>
                                <li class="link">
                                    <a href="../components/ComboBox.html" >ComboBox</a>
                                </li>
                                <li class="link">
                                    <a href="../components/ContentSwitcher.html" >ContentSwitcher</a>
                                </li>
                                <li class="link">
                                    <a href="../components/Dialog.html" >Dialog</a>
                                </li>
                                <li class="link">
                                    <a href="../components/DialogPlaceholder.html" >DialogPlaceholder</a>
                                </li>
                                <li class="link">
                                    <a href="../components/Dropdown.html" >Dropdown</a>
                                </li>
                                <li class="link">
                                    <a href="../components/DropdownList.html" >DropdownList</a>
                                </li>
                                <li class="link">
                                    <a href="../components/DynamicTableStory.html" >DynamicTableStory</a>
                                </li>
                                <li class="link">
                                    <a href="../components/ExpansionTableStory.html" >ExpansionTableStory</a>
                                </li>
                                <li class="link">
                                    <a href="../components/Icon.html" >Icon</a>
                                </li>
                                <li class="link">
                                    <a href="../components/Label.html" >Label</a>
                                </li>
                                <li class="link">
                                    <a href="../components/ListGroup.html" >ListGroup</a>
                                </li>
                                <li class="link">
                                    <a href="../components/Loading.html" >Loading</a>
                                </li>
                                <li class="link">
                                    <a href="../components/Modal.html" >Modal</a>
                                </li>
                                <li class="link">
                                    <a href="../components/ModalFooter.html" >ModalFooter</a>
                                </li>
                                <li class="link">
                                    <a href="../components/ModalHeader.html" >ModalHeader</a>
                                </li>
                                <li class="link">
                                    <a href="../components/ModalPlaceholder.html" >ModalPlaceholder</a>
                                </li>
                                <li class="link">
                                    <a href="../components/ModalStory.html" >ModalStory</a>
                                </li>
                                <li class="link">
                                    <a href="../components/Notification.html" >Notification</a>
                                </li>
                                <li class="link">
                                    <a href="../components/NotificationStory.html" >NotificationStory</a>
                                </li>
                                <li class="link">
                                    <a href="../components/OverflowMenu.html" >OverflowMenu</a>
                                </li>
                                <li class="link">
                                    <a href="../components/OverflowMenuOption.html" >OverflowMenuOption</a>
                                </li>
                                <li class="link">
                                    <a href="../components/OverflowMenuPane.html" >OverflowMenuPane</a>
                                </li>
                                <li class="link">
                                    <a href="../components/OverflowTableStory.html" >OverflowTableStory</a>
                                </li>
                                <li class="link">
                                    <a href="../components/Overlay.html" >Overlay</a>
                                </li>
                                <li class="link">
                                    <a href="../components/Pagination.html" >Pagination</a>
                                </li>
                                <li class="link">
                                    <a href="../components/PaginationStory.html" >PaginationStory</a>
                                </li>
                                <li class="link">
                                    <a href="../components/PaginationTableStory.html" >PaginationTableStory</a>
                                </li>
                                <li class="link">
                                    <a href="../components/Pill.html" >Pill</a>
                                </li>
                                <li class="link">
                                    <a href="../components/PillInput.html" >PillInput</a>
                                </li>
                                <li class="link">
                                    <a href="../components/Placeholder.html" >Placeholder</a>
                                </li>
                                <li class="link">
                                    <a href="../components/ProgressIndicator.html" >ProgressIndicator</a>
                                </li>
                                <li class="link">
                                    <a href="../components/Radio.html" >Radio</a>
                                </li>
                                <li class="link">
                                    <a href="../components/RadioGroup.html" >RadioGroup</a>
                                </li>
                                <li class="link">
                                    <a href="../components/Sample.html" >Sample</a>
                                </li>
                                <li class="link">
                                    <a href="../components/SampleModal.html" >SampleModal</a>
                                </li>
                                <li class="link">
                                    <a href="../components/SampleSub.html" >SampleSub</a>
                                </li>
                                <li class="link">
                                    <a href="../components/Select.html" >Select</a>
                                </li>
                                <li class="link">
                                    <a href="../components/Sprite.html" >Sprite</a>
                                </li>
                                <li class="link">
                                    <a href="../components/StaticIcon.html" >StaticIcon</a>
                                </li>
                                <li class="link">
                                    <a href="../components/Switch.html" >Switch</a>
                                </li>
                                <li class="link">
                                    <a href="../components/Tab.html" >Tab</a>
                                </li>
                                <li class="link">
                                    <a href="../components/TabHeaders.html" >TabHeaders</a>
                                </li>
                                <li class="link">
                                    <a href="../components/Table.html" >Table</a>
                                </li>
                                <li class="link">
                                    <a href="../components/TableStory.html" >TableStory</a>
                                </li>
                                <li class="link">
                                    <a href="../components/Tabs.html" >Tabs</a>
                                </li>
                                <li class="link">
                                    <a href="../components/Tile.html" >Tile</a>
                                </li>
                                <li class="link">
                                    <a href="../components/Toast.html" >Toast</a>
                                </li>
                                <li class="link">
                                    <a href="../components/Toast.html" >Toast</a>
                                </li>
                                <li class="link">
                                    <a href="../components/ToastStory.html" >ToastStory</a>
                                </li>
                                <li class="link">
                                    <a href="../components/Toggle.html" >Toggle</a>
                                </li>
                                <li class="link">
                                    <a href="../components/Tooltip.html" >Tooltip</a>
                                </li>
                        </ul>
                    </li>
            
                    <li class="chapter">
                        <div class="simple menu-toggler" data-toggle="collapse"
                                data-target="#xs-directives-links"
                            >
                            <span class="fa fa-code"></span>
                            <span>Directives</span>
                            <span class="fa fa-angle-down"></span>
                        </div>
                        <ul class="links collapse "
                                id="xs-directives-links"
                            >
                                <li class="link">
                                    <a href="../directives/Button.html" >Button</a>
                                </li>
                                <li class="link">
                                    <a href="../directives/ContentSwitcherOption.html"  data-type="entity-link" class="active" >ContentSwitcherOption</a>
                                </li>
                                <li class="link">
                                    <a href="../directives/DialogDirective.html" >DialogDirective</a>
                                </li>
                                <li class="link">
                                    <a href="../directives/EllipsisTooltip.html" >EllipsisTooltip</a>
                                </li>
                                <li class="link">
                                    <a href="../directives/Link.html" >Link</a>
                                </li>
                                <li class="link">
                                    <a href="../directives/OptGroup.html" >OptGroup</a>
                                </li>
                                <li class="link">
                                    <a href="../directives/Option.html" >Option</a>
                                </li>
                                <li class="link">
                                    <a href="../directives/OverflowMenuDirective.html" >OverflowMenuDirective</a>
                                </li>
                                <li class="link">
                                    <a href="../directives/ScrollableList.html" >ScrollableList</a>
                                </li>
                                <li class="link">
                                    <a href="../directives/TextArea.html" >TextArea</a>
                                </li>
                                <li class="link">
                                    <a href="../directives/TextInput.html" >TextInput</a>
                                </li>
                                <li class="link">
                                    <a href="../directives/TooltipDirective.html" >TooltipDirective</a>
                                </li>
                        </ul>
                    </li>
            
                    <li class="chapter">
                        <div class="simple menu-toggler" data-toggle="collapse"
                                data-target="#xs-classes-links"
                            >
                            <span class="fa fa-file-code-o"></span>
                            <span>Classes</span>
                            <span class="fa fa-angle-down"></span>
                        </div>
                        <ul class="links collapse "
                                id="xs-classes-links"
                            >
                                <li class="link">
                                    <a href="../classes/AbstractDropdownView.html" >AbstractDropdownView</a>
                                </li>
                                <li class="link">
                                    <a href="../classes/BaseModal.html" >BaseModal</a>
                                </li>
                                <li class="link">
                                    <a href="../classes/CheckboxChange.html" >CheckboxChange</a>
                                </li>
                                <li class="link">
                                    <a href="../classes/CustomHeaderItem.html" >CustomHeaderItem</a>
                                </li>
                                <li class="link">
                                    <a href="../classes/DateTimeModel.html" >DateTimeModel</a>
                                </li>
                                <li class="link">
                                    <a href="../classes/ModalContainer.html" >ModalContainer</a>
                                </li>
                                <li class="link">
                                    <a href="../classes/PaginationModel.html" >PaginationModel</a>
                                </li>
                                <li class="link">
                                    <a href="../classes/RadioChange.html" >RadioChange</a>
                                </li>
                                <li class="link">
                                    <a href="../classes/SampleBase.html" >SampleBase</a>
                                </li>
                                <li class="link">
                                    <a href="../classes/SwitchChange.html" >SwitchChange</a>
                                </li>
                                <li class="link">
                                    <a href="../classes/TableHeaderItem.html" >TableHeaderItem</a>
                                </li>
                                <li class="link">
                                    <a href="../classes/TableItem.html" >TableItem</a>
                                </li>
                                <li class="link">
                                    <a href="../classes/TableModel.html" >TableModel</a>
                                </li>
                                <li class="link">
                                    <a href="../classes/ToggleChange.html" >ToggleChange</a>
                                </li>
                        </ul>
                    </li>
            
                    <li class="chapter">
                        <div class="simple menu-toggler" data-toggle="collapse"
                                data-target="#xs-injectables-links"
                            >
                            <span class="fa fa-long-arrow-down"></span>
                            <span>Injectables</span>
                            <span class="fa fa-angle-down"></span>
                        </div>
                        <ul class="links collapse "
                                id="xs-injectables-links"
                            >
                                <li class="link">
                                    <a href="../injectables/BannerService.html" >BannerService</a>
                                </li>
                                <li class="link">
                                    <a href="../injectables/DialogService.html" >DialogService</a>
                                </li>
                                <li class="link">
                                    <a href="../injectables/I18n.html" >I18n</a>
                                </li>
                                <li class="link">
                                    <a href="../injectables/IconService.html" >IconService</a>
                                </li>
                                <li class="link">
                                    <a href="../injectables/ModalService.html" >ModalService</a>
                                </li>
                                <li class="link">
                                    <a href="../injectables/NotificationDisplayService.html" >NotificationDisplayService</a>
                                </li>
                                <li class="link">
                                    <a href="../injectables/NotificationService.html" >NotificationService</a>
                                </li>
                                <li class="link">
                                    <a href="../injectables/PlaceholderService.html" >PlaceholderService</a>
                                </li>
                        </ul>
                    </li>
            
            
                    <li class="chapter">
                        <div class="simple menu-toggler" data-toggle="collapse"
                                data-target="#xs-interfaces-links"
                            >
                            <span class="fa fa-info"></span>
                            <span>Interfaces</span>
                            <span class="fa fa-angle-down"></span>
                        </div>
                        <ul class="links collapse "
                                id="xs-interfaces-links"
                            >
                                <li class="link">
                                    <a href="../interfaces/AbsolutePosition.html" >AbsolutePosition</a>
                                </li>
                                <li class="link">
                                    <a href="../interfaces/AlertModalData.html" >AlertModalData</a>
                                </li>
                                <li class="link">
                                    <a href="../interfaces/BannerContent.html" >BannerContent</a>
                                </li>
                                <li class="link">
                                    <a href="../interfaces/DialogConfig.html" >DialogConfig</a>
                                </li>
                                <li class="link">
                                    <a href="../interfaces/ListItem.html" >ListItem</a>
                                </li>
                                <li class="link">
                                    <a href="../interfaces/ModalButton.html" >ModalButton</a>
                                </li>
                                <li class="link">
                                    <a href="../interfaces/NotificationContent.html" >NotificationContent</a>
                                </li>
                                <li class="link">
                                    <a href="../interfaces/NotificationContent.html" >NotificationContent</a>
                                </li>
                                <li class="link">
                                    <a href="../interfaces/SampleInterface.html" >SampleInterface</a>
                                </li>
                                <li class="link">
                                    <a href="../interfaces/SizeMap.html" >SizeMap</a>
                                </li>
                                <li class="link">
                                    <a href="../interfaces/ToastContent.html" >ToastContent</a>
                                </li>
                                <li class="link">
                                    <a href="../interfaces/ToastContent.html" >ToastContent</a>
                                </li>
                        </ul>
                    </li>
            
            
                    <li class="chapter">
                        <div class="simple menu-toggler" data-toggle="collapse"
                                data-target="#xs-miscellaneous-links"
                            >
                            <span class="fa fa-cubes"></span>
                            <span>Miscellaneous</span>
                            <span class="fa fa-angle-down"></span>
                        </div>
                        <ul class="links collapse "
                                id="xs-miscellaneous-links"
                            >
                                <li class="link">
                                  <a href="../miscellaneous/enumerations.html" data-type="entity-link" >Enums</a>
                                </li>
                                <li class="link">
                                  <a href="../miscellaneous/functions.html" data-type="entity-link" >Functions</a>
                                </li>
                                <li class="link">
                                  <a href="../miscellaneous/typealiases.html" data-type="entity-link" >Type aliases</a>
                                </li>
                                <li class="link">
                                  <a href="../miscellaneous/variables.html" data-type="entity-link" >Variables</a>
                                </li>
                        </ul>
                    </li>
            
            
                    <li class="chapter">
                        <a data-type="chapter-link" href="../coverage.html" ><span class="fa fa-tasks"></span>Documentation coverage</a>
                    </li>
            
                    <li class="divider"></li>
                    <li class="copyright">
                            Documentation generated using <a href="https://compodoc.github.io/website/" target="_blank">
                                        <img src="..//images/compodoc-vectorise.svg" class="img-responsive">
                            </a>
                    </li>
            
                </ul>
            
            </nav>
        </div>

        <div class="container-fluid main">
           <div class="row main">
               <div class="hidden-xs menu">
                   <nav>
                   
                       <ul class="list">
                   
                           <li class="title">
                               <a href="../index.html">carbon-components-angular documentation</a>
                           </li>
                   
                           <li class="divider"></li>
                   
                               <div id="book-search-input" role="search">
                                   <input type="text" placeholder="Type to search">
                               </div>
                   
                           <li class="chapter">
                               <a data-type="chapter-link" href="../index.html"><span class="fa fa-home"></span>Getting started</a>
                               <ul class="links">
                                       <li class="link">
                                           <a 
                                               
                                                href="../overview.html" 
                                                href="../overview.html" 
                                               >
                                               <span class="fa fa-th"></span>Overview
                                           </a>
                                       </li>
                                       <li class="link">
                                         <a href="../index.html" ><span class="fa fa-file-text-o"></span>README</a>
                                       </li>
                                       <li class="link">
                                               <a href="../changelog.html"
                                           >
                                               <span class="fa fa-file-text-o"></span>CHANGELOG
                                           </a>
                                       </li>
                                       <li class="link">
                                               <a href="../license.html"
                                           >
                                               <span class="fa fa-file-text-o"></span>LICENSE
                                           </a>
                                       </li>
                               </ul>
                           </li>
                   
                   
                           <li class="chapter">
                               <a data-type="chapter-link" href="../modules.html" >
                                   <div class="menu-toggler linked" data-toggle="collapse"
                                           data-target="#modules-links"
                                   >
                                       <span class="fa fa-archive"></span>
                                       <span class="link-name">Modules</span>
                                       <span class="fa fa-angle-down"></span>
                                   </div>
                               </a>
                               <ul class="links collapse "
                                       id="modules-links"
                   >
                                       <li class="link">
                                           <a href="../modules/AccordionModule.html" >AccordionModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/BannerModule.html" >BannerModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/ButtonModule.html" >ButtonModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/CalendarModule.html" >CalendarModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/CheckboxModule.html" >CheckboxModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/CodeSnippetModule.html" >CodeSnippetModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/ComboBoxModule.html" >ComboBoxModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/ContentSwitcherModule.html" >ContentSwitcherModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/DialogModule.html" >DialogModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/DropdownModule.html" >DropdownModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/I18nModule.html" >I18nModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/IconModule.html" >IconModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/InputModule.html" >InputModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/LinkModule.html" >LinkModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/ListGroupModule.html" >ListGroupModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/LoadingModule.html" >LoadingModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/ModalModule.html" >ModalModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/NFormsModule.html" >NFormsModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/NotificationModule.html" >NotificationModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/PaginationModule.html" >PaginationModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/PillInputModule.html" >PillInputModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/PlaceholderModule.html" >PlaceholderModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/ProgressIndicatorModule.html" >ProgressIndicatorModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/RadioModule.html" >RadioModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/SampleModule.html" >SampleModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/SelectModule.html" >SelectModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/StaticIconModule.html" >StaticIconModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/SwitchModule.html" >SwitchModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/TableModule.html" >TableModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/TabsModule.html" >TabsModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/TilesModule.html" >TilesModule</a>
                                       </li>
                                       <li class="link">
                                           <a href="../modules/ToggleModule.html" >ToggleModule</a>
                                       </li>
                               </ul>
                           </li>
                   
                           <li class="chapter">
                               <div class="simple menu-toggler" data-toggle="collapse"
                                       data-target="#components-links"
                   >
                                   <span class="fa fa-cogs"></span>
                                   <span>Components</span>
                                   <span class="fa fa-angle-down"></span>
                               </div>
                               <ul class="links collapse "
                                       id="components-links"
                   >
                                       <li class="link">
                                           <a href="../components/Accordion.html" >Accordion</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/AccordionItem.html" >AccordionItem</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/AlertModal.html" >AlertModal</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/AlertModalStory.html" >AlertModalStory</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/Banner.html" >Banner</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/Calendar.html" >Calendar</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/CalendarHeader.html" >CalendarHeader</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/CalendarMonth.html" >CalendarMonth</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/CalendarMonths.html" >CalendarMonths</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/CalendarQuarter.html" >CalendarQuarter</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/CalendarYear.html" >CalendarYear</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/Checkbox.html" >Checkbox</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/ClickableTile.html" >ClickableTile</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/CodeSnippet.html" >CodeSnippet</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/ComboBox.html" >ComboBox</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/ContentSwitcher.html" >ContentSwitcher</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/Dialog.html" >Dialog</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/DialogPlaceholder.html" >DialogPlaceholder</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/Dropdown.html" >Dropdown</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/DropdownList.html" >DropdownList</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/DynamicTableStory.html" >DynamicTableStory</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/ExpansionTableStory.html" >ExpansionTableStory</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/Icon.html" >Icon</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/Label.html" >Label</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/ListGroup.html" >ListGroup</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/Loading.html" >Loading</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/Modal.html" >Modal</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/ModalFooter.html" >ModalFooter</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/ModalHeader.html" >ModalHeader</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/ModalPlaceholder.html" >ModalPlaceholder</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/ModalStory.html" >ModalStory</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/Notification.html" >Notification</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/NotificationStory.html" >NotificationStory</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/OverflowMenu.html" >OverflowMenu</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/OverflowMenuOption.html" >OverflowMenuOption</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/OverflowMenuPane.html" >OverflowMenuPane</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/OverflowTableStory.html" >OverflowTableStory</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/Overlay.html" >Overlay</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/Pagination.html" >Pagination</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/PaginationStory.html" >PaginationStory</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/PaginationTableStory.html" >PaginationTableStory</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/Pill.html" >Pill</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/PillInput.html" >PillInput</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/Placeholder.html" >Placeholder</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/ProgressIndicator.html" >ProgressIndicator</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/Radio.html" >Radio</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/RadioGroup.html" >RadioGroup</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/Sample.html" >Sample</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/SampleModal.html" >SampleModal</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/SampleSub.html" >SampleSub</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/Select.html" >Select</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/Sprite.html" >Sprite</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/StaticIcon.html" >StaticIcon</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/Switch.html" >Switch</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/Tab.html" >Tab</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/TabHeaders.html" >TabHeaders</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/Table.html" >Table</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/TableStory.html" >TableStory</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/Tabs.html" >Tabs</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/Tile.html" >Tile</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/Toast.html" >Toast</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/Toast.html" >Toast</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/ToastStory.html" >ToastStory</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/Toggle.html" >Toggle</a>
                                       </li>
                                       <li class="link">
                                           <a href="../components/Tooltip.html" >Tooltip</a>
                                       </li>
                               </ul>
                           </li>
                   
                           <li class="chapter">
                               <div class="simple menu-toggler" data-toggle="collapse"
                                       data-target="#directives-links"
                   >
                                   <span class="fa fa-code"></span>
                                   <span>Directives</span>
                                   <span class="fa fa-angle-down"></span>
                               </div>
                               <ul class="links collapse "
                                       id="directives-links"
                   >
                                       <li class="link">
                                           <a href="../directives/Button.html" >Button</a>
                                       </li>
                                       <li class="link">
                                           <a href="../directives/ContentSwitcherOption.html"  data-type="entity-link" class="active" >ContentSwitcherOption</a>
                                       </li>
                                       <li class="link">
                                           <a href="../directives/DialogDirective.html" >DialogDirective</a>
                                       </li>
                                       <li class="link">
                                           <a href="../directives/EllipsisTooltip.html" >EllipsisTooltip</a>
                                       </li>
                                       <li class="link">
                                           <a href="../directives/Link.html" >Link</a>
                                       </li>
                                       <li class="link">
                                           <a href="../directives/OptGroup.html" >OptGroup</a>
                                       </li>
                                       <li class="link">
                                           <a href="../directives/Option.html" >Option</a>
                                       </li>
                                       <li class="link">
                                           <a href="../directives/OverflowMenuDirective.html" >OverflowMenuDirective</a>
                                       </li>
                                       <li class="link">
                                           <a href="../directives/ScrollableList.html" >ScrollableList</a>
                                       </li>
                                       <li class="link">
                                           <a href="../directives/TextArea.html" >TextArea</a>
                                       </li>
                                       <li class="link">
                                           <a href="../directives/TextInput.html" >TextInput</a>
                                       </li>
                                       <li class="link">
                                           <a href="../directives/TooltipDirective.html" >TooltipDirective</a>
                                       </li>
                               </ul>
                           </li>
                   
                           <li class="chapter">
                               <div class="simple menu-toggler" data-toggle="collapse"
                                       data-target="#classes-links"
                   >
                                   <span class="fa fa-file-code-o"></span>
                                   <span>Classes</span>
                                   <span class="fa fa-angle-down"></span>
                               </div>
                               <ul class="links collapse "
                                       id="classes-links"
                   >
                                       <li class="link">
                                           <a href="../classes/AbstractDropdownView.html" >AbstractDropdownView</a>
                                       </li>
                                       <li class="link">
                                           <a href="../classes/BaseModal.html" >BaseModal</a>
                                       </li>
                                       <li class="link">
                                           <a href="../classes/CheckboxChange.html" >CheckboxChange</a>
                                       </li>
                                       <li class="link">
                                           <a href="../classes/CustomHeaderItem.html" >CustomHeaderItem</a>
                                       </li>
                                       <li class="link">
                                           <a href="../classes/DateTimeModel.html" >DateTimeModel</a>
                                       </li>
                                       <li class="link">
                                           <a href="../classes/ModalContainer.html" >ModalContainer</a>
                                       </li>
                                       <li class="link">
                                           <a href="../classes/PaginationModel.html" >PaginationModel</a>
                                       </li>
                                       <li class="link">
                                           <a href="../classes/RadioChange.html" >RadioChange</a>
                                       </li>
                                       <li class="link">
                                           <a href="../classes/SampleBase.html" >SampleBase</a>
                                       </li>
                                       <li class="link">
                                           <a href="../classes/SwitchChange.html" >SwitchChange</a>
                                       </li>
                                       <li class="link">
                                           <a href="../classes/TableHeaderItem.html" >TableHeaderItem</a>
                                       </li>
                                       <li class="link">
                                           <a href="../classes/TableItem.html" >TableItem</a>
                                       </li>
                                       <li class="link">
                                           <a href="../classes/TableModel.html" >TableModel</a>
                                       </li>
                                       <li class="link">
                                           <a href="../classes/ToggleChange.html" >ToggleChange</a>
                                       </li>
                               </ul>
                           </li>
                   
                           <li class="chapter">
                               <div class="simple menu-toggler" data-toggle="collapse"
                                       data-target="#injectables-links"
                   >
                                   <span class="fa fa-long-arrow-down"></span>
                                   <span>Injectables</span>
                                   <span class="fa fa-angle-down"></span>
                               </div>
                               <ul class="links collapse "
                                       id="injectables-links"
                   >
                                       <li class="link">
                                           <a href="../injectables/BannerService.html" >BannerService</a>
                                       </li>
                                       <li class="link">
                                           <a href="../injectables/DialogService.html" >DialogService</a>
                                       </li>
                                       <li class="link">
                                           <a href="../injectables/I18n.html" >I18n</a>
                                       </li>
                                       <li class="link">
                                           <a href="../injectables/IconService.html" >IconService</a>
                                       </li>
                                       <li class="link">
                                           <a href="../injectables/ModalService.html" >ModalService</a>
                                       </li>
                                       <li class="link">
                                           <a href="../injectables/NotificationDisplayService.html" >NotificationDisplayService</a>
                                       </li>
                                       <li class="link">
                                           <a href="../injectables/NotificationService.html" >NotificationService</a>
                                       </li>
                                       <li class="link">
                                           <a href="../injectables/PlaceholderService.html" >PlaceholderService</a>
                                       </li>
                               </ul>
                           </li>
                   
                   
                           <li class="chapter">
                               <div class="simple menu-toggler" data-toggle="collapse"
                                       data-target="#interfaces-links"
                   >
                                   <span class="fa fa-info"></span>
                                   <span>Interfaces</span>
                                   <span class="fa fa-angle-down"></span>
                               </div>
                               <ul class="links collapse "
                                       id="interfaces-links"
                   >
                                       <li class="link">
                                           <a href="../interfaces/AbsolutePosition.html" >AbsolutePosition</a>
                                       </li>
                                       <li class="link">
                                           <a href="../interfaces/AlertModalData.html" >AlertModalData</a>
                                       </li>
                                       <li class="link">
                                           <a href="../interfaces/BannerContent.html" >BannerContent</a>
                                       </li>
                                       <li class="link">
                                           <a href="../interfaces/DialogConfig.html" >DialogConfig</a>
                                       </li>
                                       <li class="link">
                                           <a href="../interfaces/ListItem.html" >ListItem</a>
                                       </li>
                                       <li class="link">
                                           <a href="../interfaces/ModalButton.html" >ModalButton</a>
                                       </li>
                                       <li class="link">
                                           <a href="../interfaces/NotificationContent.html" >NotificationContent</a>
                                       </li>
                                       <li class="link">
                                           <a href="../interfaces/NotificationContent.html" >NotificationContent</a>
                                       </li>
                                       <li class="link">
                                           <a href="../interfaces/SampleInterface.html" >SampleInterface</a>
                                       </li>
                                       <li class="link">
                                           <a href="../interfaces/SizeMap.html" >SizeMap</a>
                                       </li>
                                       <li class="link">
                                           <a href="../interfaces/ToastContent.html" >ToastContent</a>
                                       </li>
                                       <li class="link">
                                           <a href="../interfaces/ToastContent.html" >ToastContent</a>
                                       </li>
                               </ul>
                           </li>
                   
                   
                           <li class="chapter">
                               <div class="simple menu-toggler" data-toggle="collapse"
                                       data-target="#miscellaneous-links"
                   >
                                   <span class="fa fa-cubes"></span>
                                   <span>Miscellaneous</span>
                                   <span class="fa fa-angle-down"></span>
                               </div>
                               <ul class="links collapse "
                                       id="miscellaneous-links"
                   >
                                       <li class="link">
                                         <a href="../miscellaneous/enumerations.html" data-type="entity-link" >Enums</a>
                                       </li>
                                       <li class="link">
                                         <a href="../miscellaneous/functions.html" data-type="entity-link" >Functions</a>
                                       </li>
                                       <li class="link">
                                         <a href="../miscellaneous/typealiases.html" data-type="entity-link" >Type aliases</a>
                                       </li>
                                       <li class="link">
                                         <a href="../miscellaneous/variables.html" data-type="entity-link" >Variables</a>
                                       </li>
                               </ul>
                           </li>
                   
                   
                           <li class="chapter">
                               <a data-type="chapter-link" href="../coverage.html" ><span class="fa fa-tasks"></span>Documentation coverage</a>
                           </li>
                   
                           <li class="divider"></li>
                           <li class="copyright">
                                   Documentation generated using <a href="https://compodoc.github.io/website/" target="_blank">
                                               <img src="..//images/compodoc-vectorise.svg" class="img-responsive">
                                   </a>
                           </li>
                   
                       </ul>
                   
                   </nav>
               </div>
               <div class="content directive">
                   <div class="content-data">





<ol class="breadcrumb">
  <li>Directives</li>
  <li>ContentSwitcherOption</li>
</ol>

<ul class="nav nav-tabs" role="tablist">
    <li class="active">
        <a href="#info" id="info-tab" role="tab" data-toggle="tab" data-link="info">Info</a>
    </li>


    <li>
        <a href="#source" role="tab" id="source-tab" data-toggle="tab" data-link="source">Source</a>
    </li>

</ul>

<div class="tab-content">
    <div class="tab-pane fade active in" id="info">
        <p class="comment">
            <h3>File</h3>
        </p>
        <p class="comment">
            <code>src/content-switcher/content-switcher-option.directive.ts</code>
        </p>




        <section>
            <h3>Metadata</h3>
            <table class="table table-sm table-hover">
                <tbody>

                    <tr>
                        <td class="col-md-3">selector</td>
                        <td class="col-md-9"><code>[ibmContentOption]</code></td>
                    </tr>

                </tbody>
            </table>
        </section>

            <section>
                <h3 id="index">Index</h3>
                <table class="table table-sm table-bordered index-table">
                    <tbody>
                        <tr>
                            <td class="col-md-4">
                                <h6><b>Properties</b></h6>
                            </td>
                        </tr>
                        <tr>
                            <td class="col-md-4">
                                <ul class="index-list">
                                    <li>
                                        <span class="modifier">Protected</span> <a href="#_active">_active</a>
                                    </li>
                                </ul>
                            </td>
                        </tr>
                        <tr>
                            <td class="col-md-4">
                                <h6><b>Inputs</b></h6>
                            </td>
                        </tr>
                        <tr>
                            <td class="col-md-4">
                                <ul class="index-list">
                                    <li>
                                        <a href="#active">active</a>
                                    </li>
                                    <li>
                                        <a href="#name">name</a>
                                    </li>
                                </ul>
                            </td>
                        </tr>
                        <tr>
                            <td class="col-md-4">
                                <h6><b>Outputs</b></h6>
                            </td>
                        </tr>
                        <tr>
                            <td class="col-md-4">
                                <ul class="index-list">
                                    <li>
                                        <a href="#selected">selected</a>
                                    </li>
                                </ul>
                            </td>
                        </tr>
                        <tr>
                            <td class="col-md-4">
                                <h6><b>HostBindings</b></h6>
                            </td>
                        </tr>
                        <tr>
                            <td class="col-md-4">
                                <ul class="index-list">
                                    <li>
                                        <a href="#attr.aria-selected">attr.aria-selected</a>
                                    </li>
                                    <li>
                                        <a href="#attr.role">attr.role</a>
                                    </li>
                                    <li>
                                        <a href="#attr.tabIndex">attr.tabIndex</a>
                                    </li>
                                    <li>
                                        <a href="#class">class</a>
                                    </li>
                                    <li>
                                        <a href="#class.bx--content-switcher--selected">class.bx--content-switcher--selected</a>
                                    </li>
                                </ul>
                            </td>
                        </tr>
                        <tr>
                            <td class="col-md-4">
                                <h6><b>HostListeners</b></h6>
                            </td>
                        </tr>
                        <tr>
                            <td class="col-md-4">
                                <ul class="index-list">
                                    <li>
                                        <a href="#blur">blur</a>
                                    </li>
                                    <li>
                                        <a href="#click">click</a>
                                    </li>
                                    <li>
                                        <a href="#focus">focus</a>
                                    </li>
                                </ul>
                            </td>
                        </tr>
                        <tr>
                            <td class="col-md-4">
                                <h6><b>Accessors</b></h6>
                            </td>
                        </tr>
                        <tr>
                            <td class="col-md-4">
                                <ul class="index-list">
                                    <li>
                                         <a href="#active">active</a>
                                    </li>
                                </ul>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </section>


            <section>
                <h3 id="inputs">Inputs</h3>
                    <table class="table table-sm table-bordered">
                        <tbody>
                            <tr>
                                <td class="col-md-2">
                                    <a name="active"></a>
                                    <code>active</code>
                                </td>
                                <td class="col-md-10">
                                      <p>
                                        <em>Type:</em>    <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>

                                      </p>
                                </td>
                            </tr>
                                    <tr>
                                        <td class="col-md-2" colspan="2">
                                            <div class="io-line">Defined in <a href="" data-line="14" class="link-to-prism">src/content-switcher/content-switcher-option.directive.ts:14</a></div>
                                        </td>
                                    </tr>
                        </tbody>
                    </table>
                    <table class="table table-sm table-bordered">
                        <tbody>
                            <tr>
                                <td class="col-md-2">
                                    <a name="name"></a>
                                    <code>name</code>
                                </td>
                                <td class="col-md-10">
                                    <p>
                                      <em>Default value: </em><code>option</code>
                                    </p>
                                </td>
                            </tr>
                                    <tr>
                                        <td class="col-md-2" colspan="2">
                                            <div class="io-line">Defined in <a href="" data-line="25" class="link-to-prism">src/content-switcher/content-switcher-option.directive.ts:25</a></div>
                                        </td>
                                    </tr>
                        </tbody>
                    </table>
            </section>

            <section>
                <h3 id="outputs">Outputs</h3>
                    <table class="table table-sm table-bordered">
                        <tbody>
                            <tr>
                                <td class="col-md-2">
                                    <a name="selected"></a>
                                    <code>selected</code>
                                </td>
                                <td class="col-md-10">
                                    <em><code>$event</code> type:</em>    <code><a href="https://angular.io/docs/ts/latest/api/api/core/EventEmitter" target="_blank" >EventEmitter</a></code>

                                </td>
                            </tr>
                                    <tr>
                                        <td class="col-md-2" colspan="2">
                                            <div class="io-line">Defined in <a href="" data-line="27" class="link-to-prism">src/content-switcher/content-switcher-option.directive.ts:27</a></div>
                                        </td>
                                    </tr>
                        </tbody>
                    </table>
            </section>

            <section>
                <h3>HostBindings</h3>        <table class="table table-sm table-bordered">
                        <tbody>
                            <tr>
                                <td class="col-md-4">
                                    <a name="attr.aria-selected"></a>
                                    <span class="name"><b> attr.aria-selected</b><a href="#attr.aria-selected"><span class="fa fa-link"></span></a></span>
                                </td>
                            </tr>
                            <tr>
                                <td class="col-md-4">
                                    <code>attr.aria-selected:     <code></code>
            </code>
                                </td>
                            </tr>
                                <tr>
                                    <td class="col-md-4">
                                        <i>Default value : </i><code>false</code>
                                    </td>
                                </tr>
                                    <tr>
                                        <td class="col-md-4">
                                            <div class="io-line">Defined in <a href="" data-line="32" class="link-to-prism">src/content-switcher/content-switcher-option.directive.ts:32</a></div>
                                        </td>
                                    </tr>
            
            
                        </tbody>
                    </table>
                    <table class="table table-sm table-bordered">
                        <tbody>
                            <tr>
                                <td class="col-md-4">
                                    <a name="attr.role"></a>
                                    <span class="name"><b> attr.role</b><a href="#attr.role"><span class="fa fa-link"></span></a></span>
                                </td>
                            </tr>
                            <tr>
                                <td class="col-md-4">
                                    <code>attr.role:     <code></code>
            </code>
                                </td>
                            </tr>
                                <tr>
                                    <td class="col-md-4">
                                        <i>Default value : </i><code>tab</code>
                                    </td>
                                </tr>
                                    <tr>
                                        <td class="col-md-4">
                                            <div class="io-line">Defined in <a href="" data-line="31" class="link-to-prism">src/content-switcher/content-switcher-option.directive.ts:31</a></div>
                                        </td>
                                    </tr>
            
            
                        </tbody>
                    </table>
                    <table class="table table-sm table-bordered">
                        <tbody>
                            <tr>
                                <td class="col-md-4">
                                    <a name="attr.tabIndex"></a>
                                    <span class="name"><b> attr.tabIndex</b><a href="#attr.tabIndex"><span class="fa fa-link"></span></a></span>
                                </td>
                            </tr>
                            <tr>
                                <td class="col-md-4">
                                    <code>attr.tabIndex:     <code></code>
            </code>
                                </td>
                            </tr>
                                <tr>
                                    <td class="col-md-4">
                                        <i>Default value : </i><code>-1</code>
                                    </td>
                                </tr>
                                    <tr>
                                        <td class="col-md-4">
                                            <div class="io-line">Defined in <a href="" data-line="33" class="link-to-prism">src/content-switcher/content-switcher-option.directive.ts:33</a></div>
                                        </td>
                                    </tr>
            
            
                        </tbody>
                    </table>
                    <table class="table table-sm table-bordered">
                        <tbody>
                            <tr>
                                <td class="col-md-4">
                                    <a name="class"></a>
                                    <span class="name"><b> class</b><a href="#class"><span class="fa fa-link"></span></a></span>
                                </td>
                            </tr>
                            <tr>
                                <td class="col-md-4">
                                    <code>class:     <code></code>
            </code>
                                </td>
                            </tr>
                                <tr>
                                    <td class="col-md-4">
                                        <i>Default value : </i><code>bx--content-switcher-btn</code>
                                    </td>
                                </tr>
                                    <tr>
                                        <td class="col-md-4">
                                            <div class="io-line">Defined in <a href="" data-line="29" class="link-to-prism">src/content-switcher/content-switcher-option.directive.ts:29</a></div>
                                        </td>
                                    </tr>
            
            
                        </tbody>
                    </table>
                    <table class="table table-sm table-bordered">
                        <tbody>
                            <tr>
                                <td class="col-md-4">
                                    <a name="class.bx--content-switcher--selected"></a>
                                    <span class="name"><b> class.bx--content-switcher--selected</b><a href="#class.bx--content-switcher--selected"><span class="fa fa-link"></span></a></span>
                                </td>
                            </tr>
                            <tr>
                                <td class="col-md-4">
                                    <code>class.bx--content-switcher--selected:     <code></code>
            </code>
                                </td>
                            </tr>
                                <tr>
                                    <td class="col-md-4">
                                        <i>Default value : </i><code>false</code>
                                    </td>
                                </tr>
                                    <tr>
                                        <td class="col-md-4">
                                            <div class="io-line">Defined in <a href="" data-line="30" class="link-to-prism">src/content-switcher/content-switcher-option.directive.ts:30</a></div>
                                        </td>
                                    </tr>
            
            
                        </tbody>
                    </table>
            </section>

            <section>
                <h3>HostListeners</h3>        <table class="table table-sm table-bordered">
                        <tbody>
                            <tr>
                                <td class="col-md-4">
                                    <a name="blur"></a>
                                    <span class="name"><b> blur</b><a href="#blur"><span class="fa fa-link"></span></a></span>
                                </td>
                            </tr>
                                <tr>
                                    <td class="col-md-4">
                                        <i>Arguments : </i><code>'$event' </code>
                                    </td>
                                </tr>
                            <tr>
                                <td class="col-md-4">
            <code>blur(event: )</code>
                                </td>
                            </tr>
            
            
                                    <tr>
                                        <td class="col-md-4">
                                            <div class="io-line">Defined in <a href="" data-line="49" class="link-to-prism">src/content-switcher/content-switcher-option.directive.ts:49</a></div>
                                        </td>
                                    </tr>
            
                        </tbody>
                    </table>
                    <table class="table table-sm table-bordered">
                        <tbody>
                            <tr>
                                <td class="col-md-4">
                                    <a name="click"></a>
                                    <span class="name"><b> click</b><a href="#click"><span class="fa fa-link"></span></a></span>
                                </td>
                            </tr>
                            <tr>
                                <td class="col-md-4">
            <code>click()</code>
                                </td>
                            </tr>
            
            
                                    <tr>
                                        <td class="col-md-4">
                                            <div class="io-line">Defined in <a href="" data-line="38" class="link-to-prism">src/content-switcher/content-switcher-option.directive.ts:38</a></div>
                                        </td>
                                    </tr>
            
                        </tbody>
                    </table>
                    <table class="table table-sm table-bordered">
                        <tbody>
                            <tr>
                                <td class="col-md-4">
                                    <a name="focus"></a>
                                    <span class="name"><b> focus</b><a href="#focus"><span class="fa fa-link"></span></a></span>
                                </td>
                            </tr>
                            <tr>
                                <td class="col-md-4">
            <code>focus()</code>
                                </td>
                            </tr>
            
            
                                    <tr>
                                        <td class="col-md-4">
                                            <div class="io-line">Defined in <a href="" data-line="44" class="link-to-prism">src/content-switcher/content-switcher-option.directive.ts:44</a></div>
                                        </td>
                                    </tr>
            
                        </tbody>
                    </table>
            </section>


            <section>
                
                    <h3 id="inputs">
                        Properties
                    </h3>
                    <table class="table table-sm table-bordered">
                        <tbody>
                            <tr>
                                <td class="col-md-4">
                                    <a name="_active"></a>
                                    <span class="name"><b><span class="modifier">Protected</span> _active</b><a href="#_active"><span class="fa fa-link"></span></a></span>
                                </td>
                            </tr>
                            <tr>
                                <td class="col-md-4">
                                    <span class="modifier-icon fa fa-lock"></span><code>_active:     <code></code>
            </code>
                                </td>
                            </tr>
                                <tr>
                                    <td class="col-md-4">
                                        <i>Default value : </i><code>false</code>
                                    </td>
                                </tr>
                                    <tr>
                                        <td class="col-md-4">
                                            <div class="io-line">Defined in <a href="" data-line="35" class="link-to-prism">src/content-switcher/content-switcher-option.directive.ts:35</a></div>
                                        </td>
                                    </tr>
            
            
                        </tbody>
                    </table>
            </section>

            <section>
                <h3 id="accessors">
                    Accessors
                </h3>
                    <table class="table table-sm table-bordered">
                        <tbody>
                            <tr>
                                <td class="col-md-4">
                                    <a name="active"></a>
                                    <span class="name"><b>active</b><a href="#active"><span class="fa fa-link"></span></a></span>
                                </td>
                            </tr>
            
                            <tr>
                                <td class="col-md-4">
                                    <span class="accessor"><b>get</b><code>active()</code></span>
                                </td>
                            </tr>
                                        <tr>
                                            <td class="col-md-4">
                                                <div class="io-line">Defined in <a href="" data-line="21" class="link-to-prism">src/content-switcher/content-switcher-option.directive.ts:21</a></div>
                                            </td>
                                        </tr>
            
                            <tr>
                                <td class="col-md-4">
                                    <span class="accessor"><b>set</b><code>active(value: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank">boolean</a>)</code></span>
                                </td>
                            </tr>
                                        <tr>
                                            <td class="col-md-4">
                                                <div class="io-line">Defined in <a href="" data-line="14" class="link-to-prism">src/content-switcher/content-switcher-option.directive.ts:14</a></div>
                                            </td>
                                        </tr>
                                <tr>
                                    <td class="col-md-4">
            
                                            <div class="io-description">
                                                    <b>Parameters :</b>
                                                    <table class="params">
                                                        <thead>
                                                            <tr>
                                                                <td>Name</td>
                                                                <td>Type</td>
                                                                <td>Optional</td>
                                                                <td>Description</td>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                                <tr>
                                                                  <td>value</td>
                                                                  <td>
                                                                          <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
                                                                  </td>
                                                                  <td>
                                                                  </td>
                                                                  <td></td>
                                                                </tr>
                                                        </tbody>
                                                    </table>
                                            </div>
                                            <div>
                                            </div>
                                            <div class="io-description">
                                                <b>Returns : </b>    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
            
                                            </div>
                                    </td>
                                </tr>
                        </tbody>
                    </table>
            </section>

    </div>


    <div class="tab-pane fade tab-source-code" id="source">
        <pre class="line-numbers"><code class="language-typescript">import {
	Directive,
	HostBinding,
	Input,
	HostListener,
	Output,
	EventEmitter
} from &quot;@angular/core&quot;;

@Directive({
	selector: &quot;[ibmContentOption]&quot;
})
export class ContentSwitcherOption {
	@Input() set active (value: boolean) {
		this._active &#x3D; value;
		this.selectedClass &#x3D; value;
		this.ariaSelected &#x3D; value;
		this.tabindex &#x3D; value ? &quot;0&quot; : &quot;-1&quot;;
	}

	get active() {
		return this._active;
	}

	@Input() name &#x3D; &quot;option&quot;;

	@Output() selected &#x3D; new EventEmitter();

	@HostBinding(&quot;class&quot;) switcherClass &#x3D; &quot;bx--content-switcher-btn&quot;;
	@HostBinding(&quot;class.bx--content-switcher--selected&quot;) selectedClass &#x3D; false;
	@HostBinding(&quot;attr.role&quot;) role &#x3D; &quot;tab&quot;;
	@HostBinding(&quot;attr.aria-selected&quot;) ariaSelected &#x3D; false;
	@HostBinding(&quot;attr.tabIndex&quot;) tabindex &#x3D; &quot;-1&quot;;

	protected _active &#x3D; false;

	@HostListener(&quot;click&quot;)
	hostClick() {
		this.active &#x3D; true;
		this.selected.emit(true);
	}

	@HostListener(&quot;focus&quot;)
	onFocus() {
		this.active &#x3D; true;
	}

	@HostListener(&quot;blur&quot;, [&quot;$event&quot;])
	onBlur(event) {
		if (event.relatedTarget) {
			this.active &#x3D; false;
		}
	}
}
</code></pre>
    </div>

</div>









                   </div><div class="search-results">
    <div class="has-results">
        <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
        <ul class="search-results-list"></ul>
    </div>
    <div class="no-results">
        <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
    </div>
</div>
</div>
           </div>
       </div>

       <script src="../js/libs/bootstrap-native.js"></script>

       <script src="../js/libs/es6-shim.min.js"></script>
       <script src="../js/libs/EventDispatcher.js"></script>
       <script src="../js/libs/promise.min.js"></script>
       <script src="../js/libs/zepto.min.js"></script>

       <script src="../js/compodoc.js"></script>

       <script>var COMPODOC_CURRENT_PAGE_DEPTH = 1;</script>

       <script src="../js/search/search.js"></script>
       <script src="../js/search/lunr.min.js"></script>
       <script src="../js/search/search-lunr.js"></script>

       <script src="../js/tabs.js"></script>
       <script src="../js/menu.js"></script>
       <script src="../js/libs/prism.js"></script>
       <script src="../js/sourceCode.js"></script>
       <script src="../js/search/search_index.js"></script>

    </body>
</html>