carbon-components-angular
Version:
Next generation components
3,248 lines • 161 kB
HTML
<!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" data-type="entity-link" class="active" >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" >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" data-type="entity-link" class="active" >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" >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 component">
<div class="content-data">
<ol class="breadcrumb">
<li>Components</li>
<li>DropdownList</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>
<li>
<a href="#tree" role="tab" id="tree-tab" data-toggle="tab" data-link="dom-tree">DOM Tree</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/dropdown/list/dropdown-list.component.ts</code>
</p>
<p class="comment">
<h3>Description</h3>
</p>
<p class="comment">
<pre class="line-numbers"><code class="language-html"><ibm-dropdown-list [items]="listItems"></ibm-dropdown-list></code></pre><pre class="line-numbers"><code class="language-typescript">listItems = [
{
content: "item one",
selected: false
},
{
content: "item two",
selected: false,
},
{
content: "item three",
selected: false
},
{
content: "item four",
selected: false
}
];</code></pre>
</p>
<p class="comment">
<h3>Implements</h3>
</p>
<p class="comment">
<code><a href="../classes/AbstractDropdownView.html" target="_self" >AbstractDropdownView</a></code>
<code><a href="https://angular.io/docs/ts/latest/api/api/core/AfterViewInit" target="_blank" >AfterViewInit</a></code>
<code><a href="https://angular.io/docs/ts/latest/api/api/core/OnChanges" target="_blank" >OnChanges</a></code>
<code><a href="https://angular.io/docs/ts/latest/api/api/core/OnDestroy" target="_blank" >OnDestroy</a></code>
</p>
<section>
<h3>Metadata</h3>
<table class="table table-sm table-hover">
<tbody>
<tr>
<td class="col-md-3">providers</td>
<td class="col-md-9">
<code>
{
: , :
}
</code>
</td>
</tr>
<tr>
<td class="col-md-3">selector</td>
<td class="col-md-9"><code>ibm-dropdown-list</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>
<a href="#clearSelected">clearSelected</a>
</li>
<li>
<span class="modifier">Public</span> <a href="#displayItems">displayItems</a>
</li>
<li>
<span class="modifier">Public</span> <a href="#elementRef">elementRef</a>
</li>
<li>
<span class="modifier">Protected</span> <a href="#focusJump">focusJump</a>
</li>
<li>
<span class="modifier">Protected</span> <a href="#index">index</a>
</li>
<li>
<a href="#list">list</a>
</li>
<li>
<span class="modifier">Protected</span> <a href="#listElementList">listElementList</a>
</li>
<li>
<span class="modifier">Public</span> <a href="#size">size</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Methods</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#doClick">doClick</a>
</li>
<li>
<a href="#doKeyDown">doKeyDown</a>
</li>
<li>
<a href="#filterBy">filterBy</a>
</li>
<li>
<a href="#getCurrentElement">getCurrentElement</a>
</li>
<li>
<a href="#getCurrentItem">getCurrentItem</a>
</li>
<li>
<a href="#getNextElement">getNextElement</a>
</li>
<li>
<a href="#getNextItem">getNextItem</a>
</li>
<li>
<a href="#getPrevElement">getPrevElement</a>
</li>
<li>
<a href="#getPrevItem">getPrevItem</a>
</li>
<li>
<a href="#getSelected">getSelected</a>
</li>
<li>
<a href="#hasNextElement">hasNextElement</a>
</li>
<li>
<a href="#hasPrevElement">hasPrevElement</a>
</li>
<li>
<a href="#initFocus">initFocus</a>
</li>
<li>
<a href="#ngAfterViewInit">ngAfterViewInit</a>
</li>
<li>
<a href="#ngOnChanges">ngOnChanges</a>
</li>
<li>
<a href="#ngOnDestroy">ngOnDestroy</a>
</li>
<li>
<a href="#propagateSelected">propagateSelected</a>
</li>
<li>
<a href="#setupFocusObservable">setupFocusObservable</a>
</li>
<li>
<a href="#updateList">updateList</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="#items">items</a>
</li>
<li>
<a href="#listTpl">listTpl</a>
</li>
<li>
<a href="#type">type</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="#select">select</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<h3 id="constructor">Constructor</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<code>constructor(elementRef: <a href="https://angular.io/docs/ts/latest/api/api/core/ElementRef" target="_blank">ElementRef</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="137" class="link-to-prism">src/dropdown/list/dropdown-list.component.ts:137</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Creates an instance of <code>DropdownList</code>.</p>
</div>
<div>
<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>elementRef</td>
<td>
<code><a href="https://angular.io/docs/ts/latest/api/api/core/ElementRef" target="_blank" >ElementRef</a></code>
</td>
<td>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</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="items"></a>
<code>items</code>
</td>
<td class="col-md-10">
<div><p>The list items belonging to the <code>DropdownList</code>.</p>
</div>
<p>
<em>Type:</em> <code><a href="../interfaces/ListItem.html" target="_self" >Array<ListItem></a></code>
</p>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="94" class="link-to-prism">src/dropdown/list/dropdown-list.component.ts:94</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-2">
<a name="listTpl"></a>
<code>listTpl</code>
</td>
<td class="col-md-10">
<div><p>Template to bind to items in the <code>DropdownList</code> (optional).</p>
</div>
<p>
<em>Type:</em> <code>string | TemplateRef</code>
</p>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="98" class="link-to-prism">src/dropdown/list/dropdown-list.component.ts:98</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-2">
<a name="type"></a>
<code>type</code>
</td>
<td class="col-md-10">
<div><p>Defines whether or not the <code>DropdownList</code> supports selecting multiple items as opposed to single
item selection.</p>
</div>
<p>
<em>Type:</em> <code>"single" | "multi"</code>
</p>
<p>
<em>Default value: </em><code>single</code>
</p>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="115" class="link-to-prism">src/dropdown/list/dropdown-list.component.ts:115</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="select"></a>
<code>select</code>
</td>
<td class="col-md-10">
<div><p>Event to emit selection of a list item within the <code>DropdownList</code>.</p>
</div>
<em><code>$event</code> type:</em> <code>EventEmitter<Object></code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="102" class="link-to-prism">src/dropdown/list/dropdown-list.component.ts:102</a></div>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<h3 id="methods">
Methods
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="doClick"></a>
<span class="name"><b> doClick</b><a href="#doClick"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>doClick(event: , item: )</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="380" class="link-to-prism">src/dropdown/list/dropdown-list.component.ts:380</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Emits the selected item or items after a mouse click event has occurred.</p>
</div>
<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>event</td>
<td>
</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>item</td>
<td>
</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>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="doKeyDown"></a>
<span class="name"><b> doKeyDown</b><a href="#doKeyDown"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>doKeyDown(event: KeyboardEvent, item: <a href="../interfaces/ListItem.html">ListItem</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="355" class="link-to-prism">src/dropdown/list/dropdown-list.component.ts:355</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Manages the keyboard accessiblity for navigation and selection within a <code>DropdownList</code>.</p>
</div>
<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>event</td>
<td>
<code>KeyboardEvent</code>
</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>item</td>
<td>
<code><a href="../interfaces/ListItem.html" target="_self" >ListItem</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>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="filterBy"></a>
<span class="name"><b> filterBy</b><a href="#filterBy"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>filterBy(query: )</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="195" class="link-to-prism">src/dropdown/list/dropdown-list.component.ts:195</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Filters the items being displayed in the DOM list.</p>
</div>
<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>query</td>
<td>
</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>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="getCurrentElement"></a>
<span class="name"><b> getCurrentElement</b><a href="#getCurrentElement"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>getCurrentElement()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="301" class="link-to-prism">src/dropdown/list/dropdown-list.component.ts:301</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Returns the <code>HTMLElement</code> for the item that is selected within the <code>DropdownList</code>.</p>
</div>
<div class="io-description">
<b>Returns : </b> <code>HTMLElement</code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="getCurrentItem"></a>
<span class="name"><b> getCurrentItem</b><a href="#getCurrentItem"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>getCurrentItem()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="291" class="link-to-prism">src/dropdown/list/dropdown-list.component.ts:291</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Returns the <code>ListItem</code> that is selected within <code>DropdownList</code>.</p>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="../interfaces/ListItem.html" target="_self" >ListItem</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="getNextElement"></a>
<span class="name"><b> getNextElement</b><a href="#getNextElement"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>getNextElement()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="241" class="link-to-prism">src/dropdown/list/dropdown-list.component.ts:241</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Returns the <code>HTMLElement</code> for the item that is subsequent to the selected item.</p>
</div>
<div class="io-description">
<b>Returns : </b> <code>HTMLElement</code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="getNextItem"></a>
<span class="name"><b> getNextItem</b><a href="#getNextItem"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>getNextItem()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="221" class="link-to-prism">src/dropdown/list/dropdown-list.component.ts:221</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Returns the <code>ListItem</code> that is subsequent to the selected item in the <code>DropdownList</code>.</p>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="../interfaces/ListItem.html" target="_self" >ListItem</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="getPrevElement"></a>
<span class="name"><b> getPrevElement</b><a href="#getPrevElement"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>getPrevElement()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="276" class="link-to-prism">src/dropdown/list/dropdown-list.component.ts:276</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Returns the <code>HTMLElement</code> for the item that precedes the selected item.</p>
</div>
<div class="io-description">
<b>Returns : </b> <code>HTMLElement</code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="getPrevItem"></a>
<span class="name"><b> getPrevItem</b><a href="#getPrevItem"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>getPrevItem()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="256" class="link-to-prism">src/dropdown/list/dropdown-list.component.ts:256</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Returns the <code>ListItem</code> that precedes the selected item within <code>DropdownList</code>.</p>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="../interfaces/ListItem.html" target="_self" >ListItem</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="getSelected"></a>
<span class="name"><b> getSelected</b><a href="#getSelected"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>getSelected()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="311" class="link-to-prism">src/dropdown/list/dropdown-list.component.ts:311</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Returns a list containing the selected item(s) in the <code>DropdownList</code>.</p>
</div>
<div class="io-description">
<b>Returns : </b> <code>[]</code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="hasNextElement"></a>
<span class="name"><b> hasNextElement</b><a href="#hasNextElement"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>hasNextElement()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="231" class="link-to-prism">src/dropdown/list/dropdown-list.component.ts:231</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Returns <code>true</code> if the selected item is not the last item in the <code>DropdownList</code>.</p>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="hasPrevElement"></a>
<span class="name"><b> hasPrevElement</b><a href="#hasPrevElement"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>hasPrevElement()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="266" class="link-to-prism">src/dropdown/list/dropdown-list.component.ts:266</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Returns <code>true</code> if the selected item is not the first in the list.</p>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="initFocus"></a>
<span class="name"><b> initFocus</b><a href="#initFocus"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>initFocus()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="348" class="link-to-prism">src/dropdown/list/dropdown-list.component.ts:348</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Initalizes focus in the list, effectivly a wrapper for <code>getCurrentElement().focus()</code></p>
</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>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="ngAfterViewInit"></a>
<span class="name"><b> ngAfterViewInit</b><a href="#ngAfterViewInit"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>ngAfterViewInit()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="157" class="link-to-prism">src/dropdown/list/dropdown-list.component.ts:157</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Retrieves array of list items and index of the selected item after view has rendered.
Additionally, any Observables for the <code>DropdownList</code> are initialized.</p>
</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>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="ngOnChanges"></a>
<span class="name"><b> ngOnChanges</b><a href="#ngOnChanges"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>ngOnChanges(changes: )</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="147" class="link-to-prism">src/dropdown/list/dropdown-list.component.ts:147</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Updates list when changes occur within the items belonging to the <code>DropdownList</code>.</p>
</div>
<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>changes</td>
<td>
</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>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="ngOnDestroy"></a>
<span class="name"><b> ngOnDestroy</b><a href="#ngOnDestroy"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>ngOnDestroy()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="166" class="link-to-prism">src/dropdown/list/dropdown-list.component.ts:166</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Removes any Observables on destruction of the component.</p>
</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>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="propagateSelected"></a>
<span class="name"><b> propagateSelected</b><a href="#propagateSelected"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>propagateSelected(value: <a href="../interfaces/ListItem.html">Array<ListItem></a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="322" class="link-to-prism">src/dropdown/list/dropdown-list.component.ts:322</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Transforms array input list of items to the correct state by updating the selected item(s).</p>
</div>
<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="../interfaces/ListItem.html" target="_self" >Array<ListItem></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>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="setupFocusObservable"></a>
<span class="name"><b> setupFocusObservable</b><a href="#setupFocusObservable"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>setupFocusObservable()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="207" class="link-to-prism">src/dropdown/list/dropdown-list.component.ts:207</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Initializes (or re-initializes) the Observable that handles switching focus to an element based on
key input matching the first letter of the item in the list.</p>
</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>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="updateList"></a>
<span class="name"><b> updateList</b><a href="#updateList"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>updateList(items: )</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="175" class="link-to-prism">src/dropdown/list/dropdown-list.component.ts:175</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Updates the displayed list of items and then retrieves the most current properties for the <code>DropdownList</code> from the DOM.</p>
</div>
<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>items</td>
<td>
</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>
<div class="io-description">
</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="clearSelected"></a>
<span class="name"><b> clearSelected</b><a href="#clearSelected"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>clearSelected: <code><a href="https://angular.io/docs/ts/latest/api/api/core/ElementRef" target="_blank" >ElementRef</a></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://angular.io/docs/ts/latest/api/api/core/ElementRef" target="_blank" >ElementRef</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Decorators : </i><code>ViewChild</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="110" class="link-to-prism">src/dropdown/list/dropdown-list.component.ts:110</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Keeps a reference to the "clear selection" element</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="displayItems"></a>
<span class="name"><b><span class="modifier">Public</span> displayItems</b><a href="#displayItems"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon fa fa-reset"></span><code>displayItems: <code><a href="../interfaces/ListItem.html" target="_self" >Array<ListItem></a></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../interfaces/ListItem.html" target="_self" >Array<ListItem></a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="125" class="link-to-prism">src/dropdown/list/dropdown-list.component.ts:125</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Holds the list of items that will be displayed in the <code>DropdownList</code>.
It differs from the the complete set of items when filtering is used (but
it is always a subset of the total items in <code>DropdownList</code>).</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="elementRef"></a>
<span class="name"><b><span class="modifier">Public</span> elementRef</b><a href="#elementRef"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon fa fa-reset"></span><code>elementRef: <code><a href="https://angular.io/docs/ts/latest/api/api/core/ElementRef" target="_blank" >ElementRef</a></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://angular.io/docs/ts/latest/api/api/core/ElementRef" target="_blank" >ElementRef</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="142" class="link-to-prism">src/dropdown/list/dropdown-list.component.ts:142</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="focusJump"></a>
<span class="name"><b><span class="modifier">Protected</span> focusJump</b><a href="#focusJump"><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>focusJump: <code></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="137" class="link-to-prism">src/dropdown/list/dropdown-list.component.ts:137</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Observable bound to keydown events to control filtering.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="index"></a>
<span class="name"><b><span class="modifier">Protected</span> index</b><a href="#index"><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>index: <code></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="129" class="link-to-prism">src/dropdown/list/dropdown-list.component.ts:129</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Maintains the index for the selected item within the <code>DropdownList</code>.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="list"></a>
<span class="name"><b> list</b><a href="#list"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>list: <code><a href="https://angular.io/docs/ts/latest/api/api/core/ElementRef" target="_blank" >ElementRef</a></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://angular.io/docs/ts/latest/api/api/core/ElementRef" target="_blank" >ElementRef</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Decorators : </i><code>ViewChild</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="106" class="link-to-prism">src/dropdown/list/dropdown-list.component.ts:106</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Maintains a reference to the view DOM element for the unordered list of items within the <code>DropdownList</code>.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="listElementList"></a>
<span class="name"><b><span class="modifier">Protected</span> listElementList</b><a href="#listElementList"><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>listElementList: <code>HTMLElement[]</code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>HTMLElement[]</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="133" class="link-to-prism">src/dropdown/list/dropdown-list.component.ts:133</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>An array holding the HTML list elements in the view.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="size"></a>
<span class="name"><b><span class="modifier">Public</span> size</b><a href="#size"><span class="fa fa-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon fa fa-reset"></span><code>size: <code>"sm" | "md" | "lg"</code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>"sm" | "md" | "lg"</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>md</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="119" class="link-to-prism">src/dropdown/list/dropdown-list.component.ts:119</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Defines the rendering size of the <code>DropdownList</code> input component.</p>
</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 {
Component,
Input,
Output,
OnChanges,
OnDestroy,
EventEmitter,
forwardRef,
TemplateRef,
AfterViewInit,
ViewChild,
ElementRef
} from "@angular/core";
import { AbstractDropdownView } from "./../abstract-dropdown-view.class";
import { ListItem } from "./../list-item.interface";
import { watchFocusJump } from "./../dropdowntools";
import { ScrollableList } from "./../scrollable-list.directive";
/**
* ```html
* <ibm-dropdown-list [items]="listItems"></ibm-dropdown-list>
* ```
* ```typescript
* listItems = [
* {
* content: "item one",
* selected: false
* },
* {
* content: "item two",
* selected: false,
* },
* {
* content: "item three",
* selected: false
* },
* {
* content: "item four",
* selected: false
* }
* ];
* ```
*/
@Component({
selector: "ibm-dropdown-list",
template: `
<ul
#list
role="listbox"
class="bx--list-box__menu">
<li tabindex="{{item.disabled? -1 : 0}}"
role="option"
*ngFor="let item of displayItems"
(click)="doClick($event, item)"
(keydown)="doKeyDown($event, item)"
class="bx--list-box__menu-item"
[ngClass]="{
selected: item.selected,
disabled: item.disabled
}">
<div
*ngIf="!listTpl && type === 'multi'"
class="bx--form-item bx--checkbox-wrapper">
<input
class="bx--checkbox"
type="checkbox"
[checked]="item.selected"
[disabled]="item.disabled"
(click)="doClick($event, item)"
tabindex="-1">
<label class="bx--checkbox-label">{{item.content}}</label>
</div>
<ng-container *ngIf="!listTpl && type === 'single'">{{item.content}}</ng-container>
<ng-template
*ngIf="listTpl"
[ngTemplateOutletContext]="{item: item}"
[ngTemplateOutlet]="listTpl">
</ng-template>
</li>
</ul>`,
providers: [
{
provide: AbstractDropdownView,
useExisting: DropdownList
}
]
}) // conceptually this extends list-group, but we dont have to
export class DropdownList implements AbstractDropdownView, AfterViewInit, OnChanges, OnDestroy {
/**
* The list items belonging to the `DropdownList`.
*/
@Input() items: Array<ListItem> = [];
/**
* Template to bind to items in the `DropdownList` (optional).
*/
@Input() listTpl: string | TemplateRef<any> = null;
/**
* Event to emit selection of a list item within the `DropdownList`.
*/
@Output() select: EventEmitter<Object> = new EventEmitter<Object>();
/**
* Maintains a reference to the view DOM element for the unordered list of items within the `DropdownList`.
*/
@ViewChild("list") list: ElementRef;
/**
* Keeps a reference to the "clear selection" element
*/
@ViewChild("clearSelected") clearSelected: ElementRef;
/**
* Defines whether or not the `DropdownList` supports selecting multiple items as opposed to single
* item selection.
*/
@Input() type: "single" | "multi" = "single";
/**
* Defines the rendering size of the `DropdownList` input component.
*/
public size: "sm" | "md" | "lg" = "md";
/**
* Holds the list of items that will be displayed in the `DropdownList`.
* It differs from the the complete set of items when filtering is used (but
* it is always a subset of the total items in `DropdownList`).
*/
public displayItems: Array<ListItem> = [];
/**
* Maintains the index for the selected item within the `DropdownList`.
*/
protected index = -1;
/**
* An array holding the HTML list elements in the view.
*/
protected listElementList: HTMLElement[];
/**
* Observable bound to keydown events to control filtering.
*/
protected focusJump;
/**
* Creates an instance of `DropdownList`.
*/
constructor(public elementRef: ElementRef) {}
/**
* Updates list when changes occur within the items belonging to the `DropdownList`.
*/
ngOnChanges(changes) {
if (changes.items) {
this.updateList(changes.items.currentValue);
}
}
/**
* Retrieves array of list items and index of the selected item after view has rendered.
* Additionally, any Observables for the `DropdownList` are initialized.
*/
ngAfterViewInit() {
this.listElementList = Array.from(this.list.nativeElement.querySelectorAll("li")) as HTMLElement[];
this.index = this.items.findIndex(item => item.selected);
this.setupFocusObservable();
}
/**
* Removes any Observables on destruction of the component.
*/
ngOnDestroy() {
if (this.focusJump) {
this.focusJump.unsubscribe();
}
}
/**
* Updates the displayed list of items and then retrieves the most current properties for the `DropdownList` from the DOM.
*/
updateList(items) {
this.items = items.map(item => Object.assign({}, item));
this.displayItems = this.items;
setTimeout(() => {
this.listElementList = Array.from(this.list.nativeElement.querySelectorAll("li")) as HTMLElement[];
}, 0);
this.index = this.items.findIndex(item => item.selected);
this.setupFocusObservable();
setTimeout(() => {
if (this.type === "single") {
this.select.emit({ item: this.items.find(item => item.selected) });
} else {
this.select.emit(this.getSelected() || []);
}
});
}
/**
* Filters the items being displayed in the DOM list.
*/
filterBy(query = "") {
if (query) {
this.displayItems = this.items.filter(item => item.content.toLowerCase().includes(query.toLowerCase()));
} else {
this.displayItems = this.items;
}
}
/**
* Initializes (or re-initializes) the Observable that handles switching focus to an element based on
* key input matching the first letter of the item in the list.
*/
setupFocusObservable() {
if (this.focusJump) {
this.focusJump.unsubscribe();
}
let elList = Array.from(this.list.nativeElement.querySelectorAll("li"));
this.focusJump = watchFocusJump(this.list.nativeElement, elList)
.subscribe(el => {
el.focus();
});
}
/**
* Returns the `ListItem` that is subsequent to the selected item in the `DropdownList`.
*/
getNextItem(): ListItem {
if (this.index < this.items.length - 1) {
this.index++;
}
return this.items[this.index];
}
/**
* Returns `true` if the selected item is not the last item in the `DropdownList`.
*/
hasNextElement(): boolean {
if (this.index < this.items.length - 1) {
return true;
}
return false;
}
/**
* Returns the `HTMLElement` for the item that is subsequent to the selected item.
*/
getNextElement(): HTMLElement {
if (this.index < this.items.length - 1) {
this.index++;
}
let elem = this.listElementList[this.index];
let item = this.items[this.index];
if (item.disabled) {
return this.getNextElement();
}
return elem;
}
/**
* Returns the `ListItem` that precedes the selected item within `DropdownList`.
*/
getPrevItem(): ListItem {
if (this.index > 0) {
this.index--;
}
return this.items[this.index];
}
/**
* Returns `true` if the selected item is not the first in the list.
*/
hasPrevElement(): boolean {
if (this.index > 0) {
return true;
}
return false;
}
/**
* Returns the `HTMLElement` for the item that precedes the selected item.
*/
getPrevElement(): HTMLElement {
if (this.index > 0) {
this.index--;
}
let elem = this.listElementList[this.index];
let item = this.items[this.index];
if (item.disabled) {
return this.getPrevElement();
}
return elem;
}
/**
* Returns the `ListItem` that is selected within `DropdownList`.
*/
getCurrentItem(): ListItem {
if (this.index < 0) {
return this.items[0];
}
return this.items[this.index];
}
/**
* Returns the `HTMLElement` for the item that is selected within the `DropdownList`.
*/
getCurrentElement(): HTMLElement {
if (this.index < 0) {
return this.listElementList[0];
}
return this.listElementList[this.index];
}
/**
* Returns a list containing the selected item(s) in the `DropdownList`.
*/
getSelected(): ListItem[] {
let selected = this.items.filter(item => item.selected);
if (selected.length === 0) {
return null;
}
return selected;
}
/**
* Transforms array input list of items to the correct state by updating the selected item(s).
*/
propagateSelected(value: Array<ListItem>): void {
for (let newItem of value) {
// copy the item
let tempNewItem: string | ListItem = Object.assign({}, newItem);
// deleted selected because it's what we _want_ to change
delete tempNewItem.selected;
// stringify for compare
tempNewItem = JSON.stringify(tempNewItem);
for (let oldItem of this.items) {
let tempOldItem: string | ListItem = Object.assign({}, oldItem);
delete tempOldItem.selected;
tempOldItem = JSON.stringify(tempOldItem);
// do the compare
if (tempOldItem.includes(tempNewItem)) {
// oldItem = Object.assign(oldItem, newItem);
oldItem.selected = newItem.selected;
} else {
oldItem.selected = false;
}
}
}
}
/**
* Initalizes focus in the list, effectivly a wrapper for `getCurrentElement().focus()`
*/
initFocus() {
this.getCurrentElement().focus();
}
/**
* Manages the keyboard accessiblity for navigation and selection within a `DropdownList`.
*/
doKeyDown(event: KeyboardEvent, item: ListItem) {
if (event.key && (event.key === "Enter" || event.key === " ")) {
event.preventDefault();
this.doClick(event, item);
} else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
event.preventDefault();
// this.checkScrollArrows();
if (event.key === "ArrowDown" && this.hasNextElement()) {
this.getNextElement().focus();
} else if (event.key === "ArrowUp") {
if (this.hasPrevElement()) {
this.getPrevElement().focus();
} else if (this.getSelected()) {
this.clearSelected.nativeElement.focus();
}
}
if (event.shiftKey) {
(event.target as HTMLElement).click();
}
}
}
/**
* Emits the selected item or items after a mouse click event has occurred.
*/
doClick(event, item) {
if (!item.disabled) {
item.selected = !item.selected;
if (this.type === "single") {
// reset the selection
for (let otherItem of this.items) {
if (item !== otherItem) { otherItem.selected = false; }
}
this.select.emit({item});
} else {
// emit an array of selected items
this.select.emit(this.getSelected());
}
this.index = this.items.indexOf(item);
}
}
}
</code></pre>
</div>
<div class="tab-pane fade" id="tree">
<div id="tree-container"></div>
<div class="tree-legend">
<div class="title">
<b>Legend</b>
</div>
<div>
<div class="color htmlelement"></div><span>Html element</span>
</div>
<div>
<div class="color component"></div><span>Component</span>
</div>
<div>
<div class="color directive"></div><span>Html element with directive</span>
</div>
</div>
</div>
</div>
<script src="../js/libs/vis.min.js"></script>
<script src="../js/libs/htmlparser.js"></script>
<script src="../js/libs/deep-iterator.js"></script>
<script>
var COMPONENT_TEMPLATE = '<div></div>'
var COMPONENTS = [{'name': 'Accordion', 'selector': 'ibm-accordion'},{'name': 'AccordionItem', 'selector': 'ibm-accordion-item'},{'name': 'AlertModal', 'selector': 'ibm-alert-modal'},{'name': 'AlertModalStory', 'selector': 'app-alert-modal-story'},{'name': 'Banner', 'selector': 'ibm-banner'},{'name': 'Calendar', 'selector': 'ibm-calendar'},{'name': 'CalendarHeader', 'selector': 'ibm-calendar-header'},{'name': 'CalendarMonth', 'selector': 'ibm-calendar-month-view'},{'name': 'CalendarMonths', 'selector': 'ibm-calendar-months-view'},{'name': 'CalendarQuarter', 'selector': 'ibm-calendar-quarter-view'},{'name': 'CalendarYear', 'selector': 'ibm-calendar-year-view'},{'name': 'Checkbox', 'selector': 'ibm-checkbox'},{'name': 'ClickableTile', 'selector': 'ibm-clickable-tile'},{'name': 'CodeSnippet', 'selector': 'ibm-code-snippet'},{'name': 'ComboBox', 'selector': 'ibm-combo-box'},{'name': 'ContentSwitcher', 'selector': 'ibm-content-switcher'},{'name': 'Dialog', 'selector': 'ibm-dialog'},{'name': 'DialogPlaceholder', 'selector': 'ibm-dialog-placeholder'},{'name': 'Dropdown', 'selector': 'ibm-dropdown'},{'name': 'DropdownList', 'selector': 'ibm-dropdown-list'},{'name': 'DynamicTableStory', 'selector': 'app-custom-table'},{'name': 'ExpansionTableStory', 'selector': 'app-expansion-table'},{'name': 'Icon', 'selector': 'ibm-icon'},{'name': 'Label', 'selector': 'ibm-label'},{'name': 'ListGroup', 'selector': 'ibm-list-group'},{'name': 'Loading', 'selector': 'ibm-loading'},{'name': 'Modal', 'selector': 'ibm-modal'},{'name': 'ModalFooter', 'selector': 'ibm-modal-footer'},{'name': 'ModalHeader', 'selector': 'ibm-modal-header'},{'name': 'ModalPlaceholder', 'selector': 'ibm-modal-placeholder'},{'name': 'ModalStory', 'selector': 'app-modal-story'},{'name': 'Notification', 'selector': 'ibm-notification'},{'name': 'NotificationStory', 'selector': 'app-notification-story'},{'name': 'OverflowMenu', 'selector': 'ibm-overflow-menu'},{'name': 'OverflowMenuOption', 'selector': 'ibm-overflow-menu-option'},{'name': 'OverflowMenuPane', 'selector': 'ibm-overflow-menu-pane'},{'name': 'OverflowTableStory', 'selector': 'app-overflow-table'},{'name': 'Overlay', 'selector': 'ibm-overlay'},{'name': 'Pagination', 'selector': 'ibm-pagination'},{'name': 'PaginationStory', 'selector': 'app-pagination'},{'name': 'PaginationTableStory', 'selector': 'app-pagination-table'},{'name': 'Pill', 'selector': 'ibm-pill'},{'name': 'PillInput', 'selector': 'ibm-pill-input'},{'name': 'Placeholder', 'selector': 'ibm-placeholder'},{'name': 'ProgressIndicator', 'selector': 'ibm-progress-indicator'},{'name': 'Radio', 'selector': 'ibm-radio'},{'name': 'RadioGroup', 'selector': 'ibm-radio-group'},{'name': 'Sample', 'selector': 'ibm-sample'},{'name': 'SampleModal', 'selector': 'app-sample-modal'},{'name': 'SampleSub', 'selector': 'ibm-sample-sub'},{'name': 'Select', 'selector': 'ibm-select'},{'name': 'Sprite', 'selector': 'ibm-sprite'},{'name': 'StaticIcon', 'selector': 'ibm-static-icon'},{'name': 'Switch', 'selector': 'ibm-switch'},{'name': 'Tab', 'selector': 'ibm-tab'},{'name': 'TabHeaders', 'selector': 'ibm-tab-headers'},{'name': 'Table', 'selector': 'ibm-table'},{'name': 'TableStory', 'selector': 'app-table'},{'name': 'Tabs', 'selector': 'ibm-tabs'},{'name': 'Tile', 'selector': 'ibm-tile'},{'name': 'Toast', 'selector': 'ibm-toast'},{'name': 'Toast', 'selector': 'ibm-toast'},{'name': 'ToastStory', 'selector': 'app-toast-story'},{'name': 'Toggle', 'selector': 'ibm-toggle'},{'name': 'Tooltip', 'selector': 'ibm-tooltip'}];
var DIRECTIVES = [{'name': 'Button', 'selector': '[ibmButton]'},{'name': 'ContentSwitcherOption', 'selector': '[ibmContentOption]'},{'name': 'DialogDirective', 'selector': '[ibmDialog]'},{'name': 'EllipsisTooltip', 'selector': '[ibmEllipsisTooltip]'},{'name': 'Link', 'selector': '[ibmLink]'},{'name': 'OptGroup', 'selector': 'optgroup'},{'name': 'Option', 'selector': 'option'},{'name': 'OverflowMenuDirective', 'selector': '[ibmOverflowMenu]'},{'name': 'ScrollableList', 'selector': '[ibmScrollableList]'},{'name': 'TextArea', 'selector': '[ibmTextArea]'},{'name': 'TextInput', 'selector': '[ibmText]'},{'name': 'TooltipDirective', 'selector': '[ibmTooltip]'}];
var ACTUAL_COMPONENT = {'name': 'DropdownList'};
</script>
<script src="../js/tree.js"></script>
</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>