carbon-components-angular

<!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/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" data-type="entity-link" class="active" >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" >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/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/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/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">