carbon-components-angular
Version:
Next generation components
1,705 lines • 97.2 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" data-type="entity-link" class="active" >ModalModule</a>
</li>
<li class="link">
<a href="../modules/NFormsModule.html" >NFormsModule</a>
</li>
<li class="link">
<a href="../modules/NotificationModule.html" >NotificationModule</a>
</li>
<li class="link">
<a href="../modules/PaginationModule.html" >PaginationModule</a>
</li>
<li class="link">
<a href="../modules/PillInputModule.html" >PillInputModule</a>
</li>
<li class="link">
<a href="../modules/PlaceholderModule.html" >PlaceholderModule</a>
</li>
<li class="link">
<a href="../modules/ProgressIndicatorModule.html" >ProgressIndicatorModule</a>
</li>
<li class="link">
<a href="../modules/RadioModule.html" >RadioModule</a>
</li>
<li class="link">
<a href="../modules/SampleModule.html" >SampleModule</a>
</li>
<li class="link">
<a href="../modules/SelectModule.html" >SelectModule</a>
</li>
<li class="link">
<a href="../modules/StaticIconModule.html" >StaticIconModule</a>
</li>
<li class="link">
<a href="../modules/SwitchModule.html" >SwitchModule</a>
</li>
<li class="link">
<a href="../modules/TableModule.html" >TableModule</a>
</li>
<li class="link">
<a href="../modules/TabsModule.html" >TabsModule</a>
</li>
<li class="link">
<a href="../modules/TilesModule.html" >TilesModule</a>
</li>
<li class="link">
<a href="../modules/ToggleModule.html" >ToggleModule</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#xs-components-links"
>
<span class="fa fa-cogs"></span>
<span>Components</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="xs-components-links"
>
<li class="link">
<a href="../components/Accordion.html" >Accordion</a>
</li>
<li class="link">
<a href="../components/AccordionItem.html" >AccordionItem</a>
</li>
<li class="link">
<a href="../components/AlertModal.html" >AlertModal</a>
</li>
<li class="link">
<a href="../components/AlertModalStory.html" >AlertModalStory</a>
</li>
<li class="link">
<a href="../components/Banner.html" >Banner</a>
</li>
<li class="link">
<a href="../components/Calendar.html" >Calendar</a>
</li>
<li class="link">
<a href="../components/CalendarHeader.html" >CalendarHeader</a>
</li>
<li class="link">
<a href="../components/CalendarMonth.html" >CalendarMonth</a>
</li>
<li class="link">
<a href="../components/CalendarMonths.html" >CalendarMonths</a>
</li>
<li class="link">
<a href="../components/CalendarQuarter.html" >CalendarQuarter</a>
</li>
<li class="link">
<a href="../components/CalendarYear.html" >CalendarYear</a>
</li>
<li class="link">
<a href="../components/Checkbox.html" >Checkbox</a>
</li>
<li class="link">
<a href="../components/ClickableTile.html" >ClickableTile</a>
</li>
<li class="link">
<a href="../components/CodeSnippet.html" >CodeSnippet</a>
</li>
<li class="link">
<a href="../components/ComboBox.html" >ComboBox</a>
</li>
<li class="link">
<a href="../components/ContentSwitcher.html" >ContentSwitcher</a>
</li>
<li class="link">
<a href="../components/Dialog.html" >Dialog</a>
</li>
<li class="link">
<a href="../components/DialogPlaceholder.html" >DialogPlaceholder</a>
</li>
<li class="link">
<a href="../components/Dropdown.html" >Dropdown</a>
</li>
<li class="link">
<a href="../components/DropdownList.html" >DropdownList</a>
</li>
<li class="link">
<a href="../components/DynamicTableStory.html" >DynamicTableStory</a>
</li>
<li class="link">
<a href="../components/ExpansionTableStory.html" >ExpansionTableStory</a>
</li>
<li class="link">
<a href="../components/Icon.html" >Icon</a>
</li>
<li class="link">
<a href="../components/Label.html" >Label</a>
</li>
<li class="link">
<a href="../components/ListGroup.html" >ListGroup</a>
</li>
<li class="link">
<a href="../components/Loading.html" >Loading</a>
</li>
<li class="link">
<a href="../components/Modal.html" >Modal</a>
</li>
<li class="link">
<a href="../components/ModalFooter.html" >ModalFooter</a>
</li>
<li class="link">
<a href="../components/ModalHeader.html" >ModalHeader</a>
</li>
<li class="link">
<a href="../components/ModalPlaceholder.html" >ModalPlaceholder</a>
</li>
<li class="link">
<a href="../components/ModalStory.html" >ModalStory</a>
</li>
<li class="link">
<a href="../components/Notification.html" >Notification</a>
</li>
<li class="link">
<a href="../components/NotificationStory.html" >NotificationStory</a>
</li>
<li class="link">
<a href="../components/OverflowMenu.html" >OverflowMenu</a>
</li>
<li class="link">
<a href="../components/OverflowMenuOption.html" >OverflowMenuOption</a>
</li>
<li class="link">
<a href="../components/OverflowMenuPane.html" >OverflowMenuPane</a>
</li>
<li class="link">
<a href="../components/OverflowTableStory.html" >OverflowTableStory</a>
</li>
<li class="link">
<a href="../components/Overlay.html" >Overlay</a>
</li>
<li class="link">
<a href="../components/Pagination.html" >Pagination</a>
</li>
<li class="link">
<a href="../components/PaginationStory.html" >PaginationStory</a>
</li>
<li class="link">
<a href="../components/PaginationTableStory.html" >PaginationTableStory</a>
</li>
<li class="link">
<a href="../components/Pill.html" >Pill</a>
</li>
<li class="link">
<a href="../components/PillInput.html" >PillInput</a>
</li>
<li class="link">
<a href="../components/Placeholder.html" >Placeholder</a>
</li>
<li class="link">
<a href="../components/ProgressIndicator.html" >ProgressIndicator</a>
</li>
<li class="link">
<a href="../components/Radio.html" >Radio</a>
</li>
<li class="link">
<a href="../components/RadioGroup.html" >RadioGroup</a>
</li>
<li class="link">
<a href="../components/Sample.html" >Sample</a>
</li>
<li class="link">
<a href="../components/SampleModal.html" >SampleModal</a>
</li>
<li class="link">
<a href="../components/SampleSub.html" >SampleSub</a>
</li>
<li class="link">
<a href="../components/Select.html" >Select</a>
</li>
<li class="link">
<a href="../components/Sprite.html" >Sprite</a>
</li>
<li class="link">
<a href="../components/StaticIcon.html" >StaticIcon</a>
</li>
<li class="link">
<a href="../components/Switch.html" >Switch</a>
</li>
<li class="link">
<a href="../components/Tab.html" >Tab</a>
</li>
<li class="link">
<a href="../components/TabHeaders.html" >TabHeaders</a>
</li>
<li class="link">
<a href="../components/Table.html" >Table</a>
</li>
<li class="link">
<a href="../components/TableStory.html" >TableStory</a>
</li>
<li class="link">
<a href="../components/Tabs.html" >Tabs</a>
</li>
<li class="link">
<a href="../components/Tile.html" >Tile</a>
</li>
<li class="link">
<a href="../components/Toast.html" >Toast</a>
</li>
<li class="link">
<a href="../components/Toast.html" >Toast</a>
</li>
<li class="link">
<a href="../components/ToastStory.html" >ToastStory</a>
</li>
<li class="link">
<a href="../components/Toggle.html" >Toggle</a>
</li>
<li class="link">
<a href="../components/Tooltip.html" >Tooltip</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#xs-directives-links"
>
<span class="fa fa-code"></span>
<span>Directives</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="xs-directives-links"
>
<li class="link">
<a href="../directives/Button.html" >Button</a>
</li>
<li class="link">
<a href="../directives/ContentSwitcherOption.html" >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" data-type="entity-link" class="active" >ModalModule</a>
</li>
<li class="link">
<a href="../modules/NFormsModule.html" >NFormsModule</a>
</li>
<li class="link">
<a href="../modules/NotificationModule.html" >NotificationModule</a>
</li>
<li class="link">
<a href="../modules/PaginationModule.html" >PaginationModule</a>
</li>
<li class="link">
<a href="../modules/PillInputModule.html" >PillInputModule</a>
</li>
<li class="link">
<a href="../modules/PlaceholderModule.html" >PlaceholderModule</a>
</li>
<li class="link">
<a href="../modules/ProgressIndicatorModule.html" >ProgressIndicatorModule</a>
</li>
<li class="link">
<a href="../modules/RadioModule.html" >RadioModule</a>
</li>
<li class="link">
<a href="../modules/SampleModule.html" >SampleModule</a>
</li>
<li class="link">
<a href="../modules/SelectModule.html" >SelectModule</a>
</li>
<li class="link">
<a href="../modules/StaticIconModule.html" >StaticIconModule</a>
</li>
<li class="link">
<a href="../modules/SwitchModule.html" >SwitchModule</a>
</li>
<li class="link">
<a href="../modules/TableModule.html" >TableModule</a>
</li>
<li class="link">
<a href="../modules/TabsModule.html" >TabsModule</a>
</li>
<li class="link">
<a href="../modules/TilesModule.html" >TilesModule</a>
</li>
<li class="link">
<a href="../modules/ToggleModule.html" >ToggleModule</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#components-links"
>
<span class="fa fa-cogs"></span>
<span>Components</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="components-links"
>
<li class="link">
<a href="../components/Accordion.html" >Accordion</a>
</li>
<li class="link">
<a href="../components/AccordionItem.html" >AccordionItem</a>
</li>
<li class="link">
<a href="../components/AlertModal.html" >AlertModal</a>
</li>
<li class="link">
<a href="../components/AlertModalStory.html" >AlertModalStory</a>
</li>
<li class="link">
<a href="../components/Banner.html" >Banner</a>
</li>
<li class="link">
<a href="../components/Calendar.html" >Calendar</a>
</li>
<li class="link">
<a href="../components/CalendarHeader.html" >CalendarHeader</a>
</li>
<li class="link">
<a href="../components/CalendarMonth.html" >CalendarMonth</a>
</li>
<li class="link">
<a href="../components/CalendarMonths.html" >CalendarMonths</a>
</li>
<li class="link">
<a href="../components/CalendarQuarter.html" >CalendarQuarter</a>
</li>
<li class="link">
<a href="../components/CalendarYear.html" >CalendarYear</a>
</li>
<li class="link">
<a href="../components/Checkbox.html" >Checkbox</a>
</li>
<li class="link">
<a href="../components/ClickableTile.html" >ClickableTile</a>
</li>
<li class="link">
<a href="../components/CodeSnippet.html" >CodeSnippet</a>
</li>
<li class="link">
<a href="../components/ComboBox.html" >ComboBox</a>
</li>
<li class="link">
<a href="../components/ContentSwitcher.html" >ContentSwitcher</a>
</li>
<li class="link">
<a href="../components/Dialog.html" >Dialog</a>
</li>
<li class="link">
<a href="../components/DialogPlaceholder.html" >DialogPlaceholder</a>
</li>
<li class="link">
<a href="../components/Dropdown.html" >Dropdown</a>
</li>
<li class="link">
<a href="../components/DropdownList.html" >DropdownList</a>
</li>
<li class="link">
<a href="../components/DynamicTableStory.html" >DynamicTableStory</a>
</li>
<li class="link">
<a href="../components/ExpansionTableStory.html" >ExpansionTableStory</a>
</li>
<li class="link">
<a href="../components/Icon.html" >Icon</a>
</li>
<li class="link">
<a href="../components/Label.html" >Label</a>
</li>
<li class="link">
<a href="../components/ListGroup.html" >ListGroup</a>
</li>
<li class="link">
<a href="../components/Loading.html" >Loading</a>
</li>
<li class="link">
<a href="../components/Modal.html" >Modal</a>
</li>
<li class="link">
<a href="../components/ModalFooter.html" >ModalFooter</a>
</li>
<li class="link">
<a href="../components/ModalHeader.html" >ModalHeader</a>
</li>
<li class="link">
<a href="../components/ModalPlaceholder.html" >ModalPlaceholder</a>
</li>
<li class="link">
<a href="../components/ModalStory.html" >ModalStory</a>
</li>
<li class="link">
<a href="../components/Notification.html" >Notification</a>
</li>
<li class="link">
<a href="../components/NotificationStory.html" >NotificationStory</a>
</li>
<li class="link">
<a href="../components/OverflowMenu.html" >OverflowMenu</a>
</li>
<li class="link">
<a href="../components/OverflowMenuOption.html" >OverflowMenuOption</a>
</li>
<li class="link">
<a href="../components/OverflowMenuPane.html" >OverflowMenuPane</a>
</li>
<li class="link">
<a href="../components/OverflowTableStory.html" >OverflowTableStory</a>
</li>
<li class="link">
<a href="../components/Overlay.html" >Overlay</a>
</li>
<li class="link">
<a href="../components/Pagination.html" >Pagination</a>
</li>
<li class="link">
<a href="../components/PaginationStory.html" >PaginationStory</a>
</li>
<li class="link">
<a href="../components/PaginationTableStory.html" >PaginationTableStory</a>
</li>
<li class="link">
<a href="../components/Pill.html" >Pill</a>
</li>
<li class="link">
<a href="../components/PillInput.html" >PillInput</a>
</li>
<li class="link">
<a href="../components/Placeholder.html" >Placeholder</a>
</li>
<li class="link">
<a href="../components/ProgressIndicator.html" >ProgressIndicator</a>
</li>
<li class="link">
<a href="../components/Radio.html" >Radio</a>
</li>
<li class="link">
<a href="../components/RadioGroup.html" >RadioGroup</a>
</li>
<li class="link">
<a href="../components/Sample.html" >Sample</a>
</li>
<li class="link">
<a href="../components/SampleModal.html" >SampleModal</a>
</li>
<li class="link">
<a href="../components/SampleSub.html" >SampleSub</a>
</li>
<li class="link">
<a href="../components/Select.html" >Select</a>
</li>
<li class="link">
<a href="../components/Sprite.html" >Sprite</a>
</li>
<li class="link">
<a href="../components/StaticIcon.html" >StaticIcon</a>
</li>
<li class="link">
<a href="../components/Switch.html" >Switch</a>
</li>
<li class="link">
<a href="../components/Tab.html" >Tab</a>
</li>
<li class="link">
<a href="../components/TabHeaders.html" >TabHeaders</a>
</li>
<li class="link">
<a href="../components/Table.html" >Table</a>
</li>
<li class="link">
<a href="../components/TableStory.html" >TableStory</a>
</li>
<li class="link">
<a href="../components/Tabs.html" >Tabs</a>
</li>
<li class="link">
<a href="../components/Tile.html" >Tile</a>
</li>
<li class="link">
<a href="../components/Toast.html" >Toast</a>
</li>
<li class="link">
<a href="../components/Toast.html" >Toast</a>
</li>
<li class="link">
<a href="../components/ToastStory.html" >ToastStory</a>
</li>
<li class="link">
<a href="../components/Toggle.html" >Toggle</a>
</li>
<li class="link">
<a href="../components/Tooltip.html" >Tooltip</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#directives-links"
>
<span class="fa fa-code"></span>
<span>Directives</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="directives-links"
>
<li class="link">
<a href="../directives/Button.html" >Button</a>
</li>
<li class="link">
<a href="../directives/ContentSwitcherOption.html" >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 module">
<div class="content-data">
<ol class="breadcrumb">
<li>Modules</li>
<li>ModalModule</li>
</ol>
<div class="text-center module-graph-container">
<div id="module-graph-svg">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.40.1 (20161225.0304)
-->
<!-- Title: dependencies Pages: 1 -->
<svg width="1300pt" height="284pt"
viewBox="0.00 0.00 1300.00 284.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 280)">
<title>dependencies</title>
<polygon fill="#ffffff" stroke="transparent" points="-4,4 -4,-280 1296,-280 1296,4 -4,4"/>
<text text-anchor="start" x="625.0091" y="-42.4" font-family="sans-serif" font-weight="bold" font-size="14.00" fill="#000000">Legend</text>
<polygon fill="#ffffb3" stroke="transparent" points="412,-10 412,-30 432,-30 432,-10 412,-10"/>
<text text-anchor="start" x="435.629" y="-15.4" font-family="sans-serif" font-size="14.00" fill="#000000">  Declarations</text>
<polygon fill="#8dd3c7" stroke="transparent" points="525,-10 525,-30 545,-30 545,-10 525,-10"/>
<text text-anchor="start" x="548.7251" y="-15.4" font-family="sans-serif" font-size="14.00" fill="#000000">  Module</text>
<polygon fill="#80b1d3" stroke="transparent" points="611,-10 611,-30 631,-30 631,-10 611,-10"/>
<text text-anchor="start" x="634.7812" y="-15.4" font-family="sans-serif" font-size="14.00" fill="#000000">  Bootstrap</text>
<polygon fill="#fdb462" stroke="transparent" points="708,-10 708,-30 728,-30 728,-10 708,-10"/>
<text text-anchor="start" x="731.6732" y="-15.4" font-family="sans-serif" font-size="14.00" fill="#000000">  Providers</text>
<polygon fill="#fb8072" stroke="transparent" points="804,-10 804,-30 824,-30 824,-10 804,-10"/>
<text text-anchor="start" x="827.7258" y="-15.4" font-family="sans-serif" font-size="14.00" fill="#000000">  Exports</text>
<g id="clust1" class="cluster">
<title>cluster_ModalModule</title>
<polygon fill="none" stroke="#000000" stroke-dasharray="1,5" points="8,-70 8,-268 1284,-268 1284,-70 8,-70"/>
</g>
<g id="clust2" class="cluster">
<title>cluster_ModalModule_declarations</title>
<polygon fill="none" stroke="#000000" points="673,-78 673,-130 1276,-130 1276,-78 673,-78"/>
</g>
<g id="clust9" class="cluster">
<title>cluster_ModalModule_imports</title>
<polygon fill="none" stroke="#000000" points="170,-78 170,-130 665,-130 665,-78 170,-78"/>
</g>
<g id="clust10" class="cluster">
<title>cluster_ModalModule_exports</title>
<polygon fill="none" stroke="#000000" points="451,-208 451,-260 990,-260 990,-208 451,-208"/>
</g>
<g id="clust12" class="cluster">
<title>cluster_ModalModule_providers</title>
<polygon fill="none" stroke="#000000" points="16,-78 16,-130 162,-130 162,-78 16,-78"/>
</g>
<!-- AlertModal -->
<g id="node1" class="node">
<title>AlertModal</title>
<polygon fill="#ffffb3" stroke="#000000" points="1267.8134,-122 1186.1866,-122 1186.1866,-86 1267.8134,-86 1267.8134,-122"/>
<text text-anchor="middle" x="1227" y="-99.8" font-family="Times,serif" font-size="14.00" fill="#000000">AlertModal</text>
</g>
<!-- ModalModule -->
<g id="node7" class="node">
<title>ModalModule</title>
<polygon fill="#8dd3c7" stroke="#000000" points="760.0997,-187 757.0997,-191 736.0997,-191 733.0997,-187 663.9003,-187 663.9003,-151 760.0997,-151 760.0997,-187"/>
<text text-anchor="middle" x="712" y="-164.8" font-family="Times,serif" font-size="14.00" fill="#000000">ModalModule</text>
</g>
<!-- AlertModal->ModalModule -->
<g id="edge1" class="edge">
<title>AlertModal->ModalModule</title>
<path fill="none" stroke="#000000" d="M1227,-122.2843C1227,-143.3211 1227,-175 1227,-175 1227,-175 770.4499,-175 770.4499,-175"/>
<polygon fill="#000000" stroke="#000000" points="770.45,-171.5001 760.4499,-175 770.4499,-178.5001 770.45,-171.5001"/>
</g>
<!-- ModalPlaceholder -->
<g id="node2" class="node">
<title>ModalPlaceholder</title>
<polygon fill="#ffffb3" stroke="#000000" points="1168.1332,-122 1049.8668,-122 1049.8668,-86 1168.1332,-86 1168.1332,-122"/>
<text text-anchor="middle" x="1109" y="-99.8" font-family="Times,serif" font-size="14.00" fill="#000000">ModalPlaceholder</text>
</g>
<!-- ModalPlaceholder->ModalModule -->
<g id="edge2" class="edge">
<title>ModalPlaceholder->ModalModule</title>
<path fill="none" stroke="#000000" d="M1109,-122.1061C1109,-141.3391 1109,-169 1109,-169 1109,-169 770.2831,-169 770.2831,-169"/>
<polygon fill="#000000" stroke="#000000" points="770.2831,-165.5001 760.2831,-169 770.2831,-172.5001 770.2831,-165.5001"/>
</g>
<!-- Modal -->
<g id="node3" class="node">
<title>Modal</title>
<polygon fill="#ffffb3" stroke="#000000" points="1032,-122 978,-122 978,-86 1032,-86 1032,-122"/>
<text text-anchor="middle" x="1005" y="-99.8" font-family="Times,serif" font-size="14.00" fill="#000000">Modal</text>
</g>
<!-- Modal->ModalModule -->
<g id="edge3" class="edge">
<title>Modal->ModalModule</title>
<path fill="none" stroke="#000000" d="M1007.2032,-122.0225C1007.2032,-139.3734 1007.2032,-163 1007.2032,-163 1007.2032,-163 770.0865,-163 770.0865,-163"/>
<polygon fill="#000000" stroke="#000000" points="770.0865,-159.5001 760.0865,-163 770.0865,-166.5001 770.0865,-159.5001"/>
</g>
<!-- ModalHeader -->
<g id="node4" class="node">
<title>ModalHeader</title>
<polygon fill="#ffffb3" stroke="#000000" points="960.4608,-122 867.5392,-122 867.5392,-86 960.4608,-86 960.4608,-122"/>
<text text-anchor="middle" x="914" y="-99.8" font-family="Times,serif" font-size="14.00" fill="#000000">ModalHeader</text>
</g>
<!-- ModalHeader->ModalModule -->
<g id="edge4" class="edge">
<title>ModalHeader->ModalModule</title>
<path fill="none" stroke="#000000" d="M873.793,-122.2396C873.793,-137.5706 873.793,-157 873.793,-157 873.793,-157 770.1052,-157 770.1052,-157"/>
<polygon fill="#000000" stroke="#000000" points="770.1052,-153.5001 760.1052,-157 770.1051,-160.5001 770.1052,-153.5001"/>
</g>
<!-- ModalFooter -->
<g id="node5" class="node">
<title>ModalFooter</title>
<polygon fill="#ffffb3" stroke="#000000" points="849.5983,-122 760.4017,-122 760.4017,-86 849.5983,-86 849.5983,-122"/>
<text text-anchor="middle" x="805" y="-99.8" font-family="Times,serif" font-size="14.00" fill="#000000">ModalFooter</text>
</g>
<!-- ModalFooter->ModalModule -->
<g id="edge5" class="edge">
<title>ModalFooter->ModalModule</title>
<path fill="none" stroke="#000000" d="M760.1647,-104C754.8662,-104 751.2967,-104 751.2967,-104 751.2967,-104 751.2967,-140.8939 751.2967,-140.8939"/>
<polygon fill="#000000" stroke="#000000" points="747.7967,-140.8938 751.2967,-150.8939 754.7967,-140.8939 747.7967,-140.8938"/>
</g>
<!-- Overlay -->
<g id="node6" class="node">
<title>Overlay</title>
<polygon fill="#ffffb3" stroke="#000000" points="742.5871,-122 681.4129,-122 681.4129,-86 742.5871,-86 742.5871,-122"/>
<text text-anchor="middle" x="712" y="-99.8" font-family="Times,serif" font-size="14.00" fill="#000000">Overlay</text>
</g>
<!-- Overlay->ModalModule -->
<g id="edge6" class="edge">
<title>Overlay->ModalModule</title>
<path fill="none" stroke="#000000" d="M712,-122.1061C712,-122.1061 712,-140.991 712,-140.991"/>
<polygon fill="#000000" stroke="#000000" points="708.5001,-140.9909 712,-150.991 715.5001,-140.991 708.5001,-140.9909"/>
</g>
<!-- AlertModal -->
<g id="node12" class="node">
<title>AlertModal </title>
<polygon fill="#fb8072" stroke="#000000" points="982.313,-252 897.687,-252 897.687,-216 982.313,-216 982.313,-252"/>
<text text-anchor="middle" x="940" y="-229.8" font-family="Times,serif" font-size="14.00" fill="#000000">AlertModal </text>
</g>
<!-- ModalModule->AlertModal -->
<g id="edge11" class="edge">
<title>ModalModule->AlertModal </title>
<path fill="none" stroke="#000000" stroke-dasharray="5,2" d="M760.1675,-181C824.1084,-181 929.037,-181 929.037,-181 929.037,-181 929.037,-205.7604 929.037,-205.7604"/>
<polygon fill="#000000" stroke="#000000" points="925.5371,-205.7604 929.037,-215.7604 932.5371,-205.7604 925.5371,-205.7604"/>
</g>
<!-- ModalPlaceholder -->
<g id="node13" class="node">
<title>ModalPlaceholder </title>
<polygon fill="#fb8072" stroke="#000000" points="880.1327,-252 757.8673,-252 757.8673,-216 880.1327,-216 880.1327,-252"/>
<text text-anchor="middle" x="819" y="-229.8" font-family="Times,serif" font-size="14.00" fill="#000000">ModalPlaceholder </text>
</g>
<!-- ModalModule->ModalPlaceholder -->
<g id="edge12" class="edge">
<title>ModalModule->ModalPlaceholder </title>
<path fill="none" stroke="#000000" stroke-dasharray="5,2" d="M748.9793,-187.1061C748.9793,-206.3391 748.9793,-234 748.9793,-234 748.9793,-234 749.8661,-234 749.8661,-234"/>
<polygon fill="#000000" stroke="#000000" points="747.8475,-237.5001 757.8475,-234 747.8474,-230.5001 747.8475,-237.5001"/>
</g>
<!-- Modal -->
<g id="node14" class="node">
<title>Modal </title>
<polygon fill="#fb8072" stroke="#000000" points="740.0498,-252 683.9502,-252 683.9502,-216 740.0498,-216 740.0498,-252"/>
<text text-anchor="middle" x="712" y="-229.8" font-family="Times,serif" font-size="14.00" fill="#000000">Modal </text>
</g>
<!-- ModalModule->Modal -->
<g id="edge13" class="edge">
<title>ModalModule->Modal </title>
<path fill="none" stroke="#000000" stroke-dasharray="5,2" d="M712,-187.1061C712,-187.1061 712,-205.991 712,-205.991"/>
<polygon fill="#000000" stroke="#000000" points="708.5001,-205.9909 712,-215.991 715.5001,-205.991 708.5001,-205.9909"/>
</g>
<!-- ModalHeader -->
<g id="node15" class="node">
<title>ModalHeader </title>
<polygon fill="#fb8072" stroke="#000000" points="666.4619,-252 569.5381,-252 569.5381,-216 666.4619,-216 666.4619,-252"/>
<text text-anchor="middle" x="618" y="-229.8" font-family="Times,serif" font-size="14.00" fill="#000000">ModalHeader </text>
</g>
<!-- ModalModule->ModalHeader -->
<g id="edge14" class="edge">
<title>ModalModule->ModalHeader </title>
<path fill="none" stroke="#000000" stroke-dasharray="5,2" d="M663.7781,-182C661.652,-182 660.392,-182 660.392,-182 660.392,-182 660.392,-205.8129 660.392,-205.8129"/>
<polygon fill="#000000" stroke="#000000" points="656.8921,-205.8129 660.392,-215.8129 663.8921,-205.813 656.8921,-205.8129"/>
</g>
<!-- ModalFooter -->
<g id="node16" class="node">
<title>ModalFooter </title>
<polygon fill="#fb8072" stroke="#000000" points="551.0991,-252 458.9009,-252 458.9009,-216 551.0991,-216 551.0991,-252"/>
<text text-anchor="middle" x="505" y="-229.8" font-family="Times,serif" font-size="14.00" fill="#000000">ModalFooter </text>
</g>
<!-- ModalModule->ModalFooter -->
<g id="edge15" class="edge">
<title>ModalModule->ModalFooter </title>
<path fill="none" stroke="#000000" stroke-dasharray="5,2" d="M663.6059,-177C614.6756,-177 546.2267,-177 546.2267,-177 546.2267,-177 546.2267,-205.9648 546.2267,-205.9648"/>
<polygon fill="#000000" stroke="#000000" points="542.7268,-205.9648 546.2267,-215.9648 549.7268,-205.9649 542.7268,-205.9648"/>
</g>
<!-- ButtonModule -->
<g id="node8" class="node">
<title>ButtonModule</title>
<polygon fill="#8dd3c7" stroke="#000000" points="656.6682,-122 653.6682,-126 632.6682,-126 629.6682,-122 559.3318,-122 559.3318,-86 656.6682,-86 656.6682,-122"/>
<text text-anchor="middle" x="608" y="-99.8" font-family="Times,serif" font-size="14.00" fill="#000000">ButtonModule</text>
</g>
<!-- ButtonModule->ModalModule -->
<g id="edge7" class="edge">
<title>ButtonModule->ModalModule</title>
<path fill="none" stroke="#000000" d="M656.7093,-104C665.9019,-104 672.7034,-104 672.7034,-104 672.7034,-104 672.7034,-140.8939 672.7034,-140.8939"/>
<polygon fill="#000000" stroke="#000000" points="669.2034,-140.8938 672.7034,-150.8939 676.2034,-140.8939 669.2034,-140.8938"/>
</g>
<!-- StaticIconModule -->
<g id="node9" class="node">
<title>StaticIconModule</title>
<polygon fill="#8dd3c7" stroke="#000000" points="541.309,-122 538.309,-126 517.309,-126 514.309,-122 424.691,-122 424.691,-86 541.309,-86 541.309,-122"/>
<text text-anchor="middle" x="483" y="-99.8" font-family="Times,serif" font-size="14.00" fill="#000000">StaticIconModule</text>
</g>
<!-- StaticIconModule->ModalModule -->
<g id="edge8" class="edge">
<title>StaticIconModule->ModalModule</title>
<path fill="none" stroke="#000000" d="M499.9276,-122.2396C499.9276,-137.5706 499.9276,-157 499.9276,-157 499.9276,-157 653.8775,-157 653.8775,-157"/>
<polygon fill="#000000" stroke="#000000" points="653.8775,-160.5001 663.8775,-157 653.8775,-153.5001 653.8775,-160.5001"/>
</g>
<!-- I18nModule -->
<g id="node10" class="node">
<title>I18nModule</title>
<polygon fill="#8dd3c7" stroke="#000000" points="406.7107,-122 403.7107,-126 382.7107,-126 379.7107,-122 321.2893,-122 321.2893,-86 406.7107,-86 406.7107,-122"/>
<text text-anchor="middle" x="364" y="-99.8" font-family="Times,serif" font-size="14.00" fill="#000000">I18nModule</text>
</g>
<!-- I18nModule->ModalModule -->
<g id="edge9" class="edge">
<title>I18nModule->ModalModule</title>
<path fill="none" stroke="#000000" d="M364,-122.0336C364,-139.0597 364,-162 364,-162 364,-162 653.6121,-162 653.6121,-162"/>
<polygon fill="#000000" stroke="#000000" points="653.6121,-165.5001 663.6121,-162 653.6121,-158.5001 653.6121,-165.5001"/>
</g>
<!-- PlaceholderModule -->
<g id="node11" class="node">
<title>PlaceholderModule</title>
<polygon fill="#8dd3c7" stroke="#000000" points="303.6331,-122 300.6331,-126 279.6331,-126 276.6331,-122 178.3669,-122 178.3669,-86 303.6331,-86 303.6331,-122"/>
<text text-anchor="middle" x="241" y="-99.8" font-family="Times,serif" font-size="14.00" fill="#000000">PlaceholderModule</text>
</g>
<!-- PlaceholderModule->ModalModule -->
<g id="edge10" class="edge">
<title>PlaceholderModule->ModalModule</title>
<path fill="none" stroke="#000000" d="M241,-122.2222C241,-140.8285 241,-167 241,-167 241,-167 653.8082,-167 653.8082,-167"/>
<polygon fill="#000000" stroke="#000000" points="653.8082,-170.5001 663.8082,-167 653.8082,-163.5001 653.8082,-170.5001"/>
</g>
<!-- ModalService -->
<g id="node17" class="node">
<title>ModalService</title>
<ellipse fill="#fdb462" stroke="#000000" cx="89" cy="-104" rx="65.4072" ry="18"/>
<text text-anchor="middle" x="89" y="-99.8" font-family="Times,serif" font-size="14.00" fill="#000000">ModalService</text>
</g>
<!-- ModalService->ModalModule -->
<g id="edge16" class="edge">
<title>ModalService->ModalModule</title>
<path fill="none" stroke="#000000" d="M89,-122.2228C89,-142.3652 89,-172 89,-172 89,-172 653.891,-172 653.891,-172"/>
<polygon fill="#000000" stroke="#000000" points="653.891,-175.5001 663.891,-172 653.8909,-168.5001 653.891,-175.5001"/>
</g>
</g>
</svg>
</div>
<i id="fullscreen" class="fa fa-expand module-graph-fullscreen-btn" aria-hidden="true"></i>
<div class="btn-group">
<button id="zoom-in" class="btn btn-default btn-sm">Zoom in</button>
<button id="reset" class="btn btn-default btn-sm">Reset</button>
<button id="zoom-out" class="btn btn-default btn-sm">Zoom out</button>
</div>
</div>
<script src="../js/libs/svg-pan-zoom.min.js"></script>
<script src="../js/svg-pan-zoom.controls.js"></script>
<ul class="nav nav-tabs" role="tablist">
<li class="active">
<a href="#info" id="info-tab" role="tab" data-toggle="tab" data-link="info">Info</a>
</li>
<li>
<a href="#source" role="tab" id="source-tab" data-toggle="tab" data-link="source">Source</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="info">
<p class="comment">
<h3>File</h3>
</p>
<p class="comment">
<code>src/modal/modal.module.ts</code>
</p>
<div class="container-fluid module">
<div class="row">
<div class="col-sm-3">
<h3>Declarations<a href="https://angular.io/api/core/NgModule#declarations" target="_blank" title="Official documentation about module declarations"><span class="fa fa-info-circle"></span></a></h3>
<ul class="list-group">
<li class="list-group-item">
<a href="../components/AlertModal.html">AlertModal</a>
</li>
<li class="list-group-item">
<a href="../components/ModalPlaceholder.html">ModalPlaceholder</a>
</li>
<li class="list-group-item">
<a href="../components/Modal.html">Modal</a>
</li>
<li class="list-group-item">
<a href="../components/ModalHeader.html">ModalHeader</a>
</li>
<li class="list-group-item">
<a href="../components/ModalFooter.html">ModalFooter</a>
</li>
<li class="list-group-item">
<a href="../s/Overlay.html">Overlay</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<h3>Providers<a href="https://angular.io/api/core/NgModule#providers" target="_blank" title="Official documentation about module providers"><span class="fa fa-info-circle"></a></h3>
<ul class="list-group">
<li class="list-group-item">
<a href="../injectables/ModalService.html" >ModalService</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<h3>Imports<a href="https://angular.io/api/core/NgModule#imports" target="_blank" title="Official documentation about module imports"><span class="fa fa-info-circle"></a></h3>
<ul class="list-group">
<li class="list-group-item">
<a href="../modules/ButtonModule.html" >ButtonModule</a>
</li>
<li class="list-group-item">
<a href="../modules/StaticIconModule.html" >StaticIconModule</a>
</li>
<li class="list-group-item">
<a href="../modules/I18nModule.html" >I18nModule</a>
</li>
<li class="list-group-item">
<a href="../modules/PlaceholderModule.html" >PlaceholderModule</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<h3>Exports<a href="https://angular.io/api/core/NgModule#exports" target="_blank" title="Official documentation about module exports"><span class="fa fa-info-circle"></a></h3>
<ul class="list-group">
<li class="list-group-item">
<a href="../s/AlertModal.html" >AlertModal</a>
</li>
<li class="list-group-item">
<a href="../s/ModalPlaceholder.html" >ModalPlaceholder</a>
</li>
<li class="list-group-item">
<a href="../s/Modal.html" >Modal</a>
</li>
<li class="list-group-item">
<a href="../s/ModalHeader.html" >ModalHeader</a>
</li>
<li class="list-group-item">
<a href="../s/ModalFooter.html" >ModalFooter</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane fade tab-source-code" id="source">
<pre class="line-numbers"><code class="language-typescript">import {
NgModule,
Optional,
SkipSelf
} from "@angular/core";
import { CommonModule } from "@angular/common";
import { StaticIconModule } from "./../icon/static-icon.module";
// imports
import { ModalPlaceholder } from "./modal-placeholder.component";
import { ModalService } from "./modal.service";
import { Modal } from "./modal.component";
import { ModalFooter } from "./modal-footer.component";
import { Overlay } from "./overlay.component";
import { ModalHeader } from "./modal-header.component";
import { AlertModal } from "./alert-modal.component";
import { ButtonModule } from "../forms/forms.module";
import { I18nModule } from "./../i18n/i18n.module";
import { PlaceholderModule } from "./../placeholder/placeholder.module";
// exports
export { default as Modal } from "./modal.decorator";
export { ModalService } from "./modal.service";
export * from "./alert-modal.interface";
export * from "./base-modal.class";
@NgModule({
declarations: [
AlertModal,
ModalPlaceholder,
Modal,
ModalHeader,
ModalFooter,
Overlay
],
exports: [
AlertModal,
ModalPlaceholder,
Modal,
ModalHeader,
ModalFooter
],
entryComponents: [
AlertModal,
Modal,
ModalFooter,
ModalHeader
],
providers: [ ModalService ],
imports: [
CommonModule,
ButtonModule,
StaticIconModule,
I18nModule,
PlaceholderModule
]
})
export class ModalModule { }
</code></pre>
</div>
</div>
</div><div class="search-results">
<div class="has-results">
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
<ul class="search-results-list"></ul>
</div>
<div class="no-results">
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
</div>
</div>
</div>
</div>
</div>
<script src="../js/libs/bootstrap-native.js"></script>
<script src="../js/libs/es6-shim.min.js"></script>
<script src="../js/libs/EventDispatcher.js"></script>
<script src="../js/libs/promise.min.js"></script>
<script src="../js/libs/zepto.min.js"></script>
<script src="../js/compodoc.js"></script>
<script>var COMPODOC_CURRENT_PAGE_DEPTH = 1;</script>
<script src="../js/search/search.js"></script>
<script src="../js/search/lunr.min.js"></script>
<script src="../js/search/search-lunr.js"></script>
<script src="../js/tabs.js"></script>
<script src="../js/menu.js"></script>
<script src="../js/libs/prism.js"></script>
<script src="../js/sourceCode.js"></script>
<script src="../js/search/search_index.js"></script>
</body>
</html>