true allows toggling, with parameter false\n * only hides opened dropdown. Parameter usage will be removed in ngx-bootstrap v3\n * @param {?=} value\n * @return {?}\n */\n toggle(value) {\n if (this.isOpen || !value) {\n return this.hide();\n }\n return this.show();\n }\n /**\n * \\@internal\n * @param {?} event\n * @return {?}\n */\n _contains(event) {\n return this._elementRef.nativeElement.contains(event.target) ||\n (this._dropdown.instance && this._dropdown.instance._contains(event.target));\n }\n /**\n * @return {?}\n */\n ngOnDestroy() {\n // clean up subscriptions and destroy dropdown\n for (const sub of this._subscriptions) {\n sub.unsubscribe();\n }\n this._dropdown.dispose();\n }\n /**\n * @private\n * @return {?}\n */\n addBs4Polyfills() {\n if (!isBs3()) {\n this.addShowClass();\n this.checkRightAlignment();\n this.addDropupStyles();\n }\n }\n /**\n * @private\n * @return {?}\n */\n playAnimation() {\n if (this._state.isAnimated && this._inlinedMenu) {\n setTimeout((/**\n * @return {?}\n */\n () => {\n this._factoryDropDownAnimation.create(this._inlinedMenu.rootNodes[0])\n .play();\n }));\n }\n }\n /**\n * @private\n * @return {?}\n */\n addShowClass() {\n if (this._inlinedMenu && this._inlinedMenu.rootNodes[0]) {\n this._renderer.addClass(this._inlinedMenu.rootNodes[0], 'show');\n }\n }\n /**\n * @private\n * @return {?}\n */\n removeShowClass() {\n if (this._inlinedMenu && this._inlinedMenu.rootNodes[0]) {\n this._renderer.removeClass(this._inlinedMenu.rootNodes[0], 'show');\n }\n }\n /**\n * @private\n * @return {?}\n */\n checkRightAlignment() {\n if (this._inlinedMenu && this._inlinedMenu.rootNodes[0]) {\n /** @type {?} */\n const isRightAligned = this._inlinedMenu.rootNodes[0].classList.contains('dropdown-menu-right');\n this._renderer.setStyle(this._inlinedMenu.rootNodes[0], 'left', isRightAligned ? 'auto' : '0');\n this._renderer.setStyle(this._inlinedMenu.rootNodes[0], 'right', isRightAligned ? '0' : 'auto');\n }\n }\n /**\n * @private\n * @return {?}\n */\n addDropupStyles() {\n if (this._inlinedMenu && this._inlinedMenu.rootNodes[0]) {\n // a little hack to not break support of bootstrap 4 beta\n this._renderer.setStyle(this._inlinedMenu.rootNodes[0], 'top', this.dropup ? 'auto' : '100%');\n this._renderer.setStyle(this._inlinedMenu.rootNodes[0], 'transform', this.dropup ? 'translateY(-101%)' : 'translateY(0)');\n this._renderer.setStyle(this._inlinedMenu.rootNodes[0], 'bottom', 'auto');\n }\n }\n /**\n * @private\n * @return {?}\n */\n removeDropupStyles() {\n if (this._inlinedMenu && this._inlinedMenu.rootNodes[0]) {\n this._renderer.removeStyle(this._inlinedMenu.rootNodes[0], 'top');\n this._renderer.removeStyle(this._inlinedMenu.rootNodes[0], 'transform');\n this._renderer.removeStyle(this._inlinedMenu.rootNodes[0], 'bottom');\n }\n }\n}\nBsDropdownDirective.ɵfac = function BsDropdownDirective_Factory(t) { return new (t || BsDropdownDirective)(ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ElementRef), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.Renderer2), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ViewContainerRef), ɵngcc0.ɵɵdirectiveInject(ɵngcc2.ComponentLoaderFactory), ɵngcc0.ɵɵdirectiveInject(BsDropdownState), ɵngcc0.ɵɵdirectiveInject(BsDropdownConfig), ɵngcc0.ɵɵdirectiveInject(ɵngcc1.AnimationBuilder)); };\nBsDropdownDirective.ɵdir = /*@__PURE__*/ ɵngcc0.ɵɵdefineDirective({ type: BsDropdownDirective, selectors: [[\"\", \"bsDropdown\", \"\"], [\"\", \"dropdown\", \"\"]], hostVars: 6, hostBindings: function BsDropdownDirective_HostBindings(rf, ctx) { if (rf & 2) {\n ɵngcc0.ɵɵclassProp(\"dropup\", ctx.dropup)(\"open\", ctx.isOpen)(\"show\", ctx.isOpen && ctx.isBs4);\n } }, inputs: { autoClose: \"autoClose\", isAnimated: \"isAnimated\", insideClick: \"insideClick\", isDisabled: \"isDisabled\", isOpen: \"isOpen\", placement: \"placement\", triggers: \"triggers\", container: \"container\", dropup: \"dropup\" }, outputs: { onShown: \"onShown\", onHidden: \"onHidden\", isOpenChange: \"isOpenChange\" }, exportAs: [\"bs-dropdown\"], features: [ɵngcc0.ɵɵProvidersFeature([BsDropdownState])] });\n/** @nocollapse */\nBsDropdownDirective.ctorParameters = () => [\n { type: ElementRef },\n { type: Renderer2 },\n { type: ViewContainerRef },\n { type: ComponentLoaderFactory },\n { type: BsDropdownState },\n { type: BsDropdownConfig },\n { type: AnimationBuilder }\n];\nBsDropdownDirective.propDecorators = {\n placement: [{ type: Input }],\n triggers: [{ type: Input }],\n container: [{ type: Input }],\n dropup: [{ type: Input }],\n autoClose: [{ type: Input }],\n isAnimated: [{ type: Input }],\n insideClick: [{ type: Input }],\n isDisabled: [{ type: Input }],\n isOpen: [{ type: Input }],\n isOpenChange: [{ type: Output }],\n onShown: [{ type: Output }],\n onHidden: [{ type: Output }]\n};\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(BsDropdownDirective, [{\n type: Directive,\n args: [{\n selector: '[bsDropdown],[dropdown]',\n exportAs: 'bs-dropdown',\n providers: [BsDropdownState],\n host: {\n '[class.dropup]': 'dropup',\n '[class.open]': 'isOpen',\n '[class.show]': 'isOpen && isBs4'\n }\n }]\n }], function () { return [{ type: ɵngcc0.ElementRef }, { type: ɵngcc0.Renderer2 }, { type: ɵngcc0.ViewContainerRef }, { type: ɵngcc2.ComponentLoaderFactory }, { type: BsDropdownState }, { type: BsDropdownConfig }, { type: ɵngcc1.AnimationBuilder }]; }, { onShown: [{\n type: Output\n }], onHidden: [{\n type: Output\n }], isOpenChange: [{\n type: Output\n }], autoClose: [{\n type: Input\n }], isAnimated: [{\n type: Input\n }], insideClick: [{\n type: Input\n }], isDisabled: [{\n type: Input\n }], isOpen: [{\n type: Input\n }], placement: [{\n type: Input\n }], triggers: [{\n type: Input\n }], container: [{\n type: Input\n }], dropup: [{\n type: Input\n }] }); })();\nif (false) {\n /**\n * Placement of a popover. Accepts: \"top\", \"bottom\", \"left\", \"right\"\n * @type {?}\n */\n BsDropdownDirective.prototype.placement;\n /**\n * Specifies events that should trigger. Supports a space separated list of\n * event names.\n * @type {?}\n */\n BsDropdownDirective.prototype.triggers;\n /**\n * A selector specifying the element the popover should be appended to.\n * @type {?}\n */\n BsDropdownDirective.prototype.container;\n /**\n * This attribute indicates that the dropdown should be opened upwards\n * @type {?}\n */\n BsDropdownDirective.prototype.dropup;\n /**\n * Emits an event when isOpen change\n * @type {?}\n */\n BsDropdownDirective.prototype.isOpenChange;\n /**\n * Emits an event when the popover is shown\n * @type {?}\n */\n BsDropdownDirective.prototype.onShown;\n /**\n * Emits an event when the popover is hidden\n * @type {?}\n */\n BsDropdownDirective.prototype.onHidden;\n /**\n * @type {?}\n * @private\n */\n BsDropdownDirective.prototype._dropdown;\n /**\n * @type {?}\n * @private\n */\n BsDropdownDirective.prototype._isInlineOpen;\n /**\n * @type {?}\n * @private\n */\n BsDropdownDirective.prototype._inlinedMenu;\n /**\n * @type {?}\n * @private\n */\n BsDropdownDirective.prototype._isDisabled;\n /**\n * @type {?}\n * @private\n */\n BsDropdownDirective.prototype._subscriptions;\n /**\n * @type {?}\n * @private\n */\n BsDropdownDirective.prototype._isInited;\n /**\n * @type {?}\n * @private\n */\n BsDropdownDirective.prototype._factoryDropDownAnimation;\n /**\n * @type {?}\n * @private\n */\n BsDropdownDirective.prototype._elementRef;\n /**\n * @type {?}\n * @private\n */\n BsDropdownDirective.prototype._renderer;\n /**\n * @type {?}\n * @private\n */\n BsDropdownDirective.prototype._viewContainerRef;\n /**\n * @type {?}\n * @private\n */\n BsDropdownDirective.prototype._cis;\n /**\n * @type {?}\n * @private\n */\n BsDropdownDirective.prototype._state;\n /**\n * @type {?}\n * @private\n */\n BsDropdownDirective.prototype._config;\n}\n\n/**\n * @fileoverview added by tsickle\n * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc\n */\nclass BsDropdownMenuDirective {\n // tslint:disable:no-any\n /**\n * @param {?} _state\n * @param {?} _viewContainer\n * @param {?} _templateRef\n */\n constructor(_state, _viewContainer, _templateRef) {\n _state.resolveDropdownMenu({\n templateRef: _templateRef,\n viewContainer: _viewContainer\n });\n }\n}\nBsDropdownMenuDirective.ɵfac = function BsDropdownMenuDirective_Factory(t) { return new (t || BsDropdownMenuDirective)(ɵngcc0.ɵɵdirectiveInject(BsDropdownState), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ViewContainerRef), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.TemplateRef)); };\nBsDropdownMenuDirective.ɵdir = /*@__PURE__*/ ɵngcc0.ɵɵdefineDirective({ type: BsDropdownMenuDirective, selectors: [[\"\", \"bsDropdownMenu\", \"\"], [\"\", \"dropdownMenu\", \"\"]], exportAs: [\"bs-dropdown-menu\"] });\n/** @nocollapse */\nBsDropdownMenuDirective.ctorParameters = () => [\n { type: BsDropdownState },\n { type: ViewContainerRef },\n { type: TemplateRef }\n];\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(BsDropdownMenuDirective, [{\n type: Directive,\n args: [{\n selector: '[bsDropdownMenu],[dropdownMenu]',\n exportAs: 'bs-dropdown-menu'\n }]\n }], function () { return [{ type: BsDropdownState }, { type: ɵngcc0.ViewContainerRef }, { type: ɵngcc0.TemplateRef }]; }, null); })();\n\n/**\n * @fileoverview added by tsickle\n * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc\n */\nclass BsDropdownToggleDirective {\n /**\n * @param {?} _changeDetectorRef\n * @param {?} _dropdown\n * @param {?} _element\n * @param {?} _renderer\n * @param {?} _state\n */\n constructor(_changeDetectorRef, _dropdown, _element, _renderer, _state) {\n this._changeDetectorRef = _changeDetectorRef;\n this._dropdown = _dropdown;\n this._element = _element;\n this._renderer = _renderer;\n this._state = _state;\n this.isDisabled = null;\n this._subscriptions = [];\n // sync is open value with state\n this._subscriptions.push(this._state.isOpenChange.subscribe((/**\n * @param {?} value\n * @return {?}\n */\n (value) => {\n this.isOpen = value;\n if (value) {\n this._documentClickListener = this._renderer.listen('document', 'click', (/**\n * @param {?} event\n * @return {?}\n */\n (event) => {\n if (this._state.autoClose && event.button !== 2 &&\n !this._element.nativeElement.contains(event.target) &&\n !(this._state.insideClick && this._dropdown._contains(event))) {\n this._state.toggleClick.emit(false);\n this._changeDetectorRef.detectChanges();\n }\n }));\n this._escKeyUpListener = this._renderer.listen(this._element.nativeElement, 'keyup.esc', (/**\n * @return {?}\n */\n () => {\n if (this._state.autoClose) {\n this._state.toggleClick.emit(false);\n this._changeDetectorRef.detectChanges();\n }\n }));\n }\n else {\n this._documentClickListener();\n this._escKeyUpListener();\n }\n })));\n // populate disabled state\n this._subscriptions.push(this._state.isDisabledChange.subscribe((/**\n * @param {?} value\n * @return {?}\n */\n (value) => (this.isDisabled = value || null))));\n }\n /**\n * @return {?}\n */\n onClick() {\n if (this.isDisabled) {\n return;\n }\n this._state.toggleClick.emit(true);\n }\n /**\n * @return {?}\n */\n ngOnDestroy() {\n if (this._documentClickListener) {\n this._documentClickListener();\n }\n if (this._escKeyUpListener) {\n this._escKeyUpListener();\n }\n for (const sub of this._subscriptions) {\n sub.unsubscribe();\n }\n }\n}\nBsDropdownToggleDirective.ɵfac = function BsDropdownToggleDirective_Factory(t) { return new (t || BsDropdownToggleDirective)(ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ChangeDetectorRef), ɵngcc0.ɵɵdirectiveInject(BsDropdownDirective), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.ElementRef), ɵngcc0.ɵɵdirectiveInject(ɵngcc0.Renderer2), ɵngcc0.ɵɵdirectiveInject(BsDropdownState)); };\nBsDropdownToggleDirective.ɵdir = /*@__PURE__*/ ɵngcc0.ɵɵdefineDirective({ type: BsDropdownToggleDirective, selectors: [[\"\", \"bsDropdownToggle\", \"\"], [\"\", \"dropdownToggle\", \"\"]], hostVars: 3, hostBindings: function BsDropdownToggleDirective_HostBindings(rf, ctx) { if (rf & 1) {\n ɵngcc0.ɵɵlistener(\"click\", function BsDropdownToggleDirective_click_HostBindingHandler() { return ctx.onClick(); });\n } if (rf & 2) {\n ɵngcc0.ɵɵattribute(\"aria-haspopup\", true)(\"disabled\", ctx.isDisabled)(\"aria-expanded\", ctx.isOpen);\n } }, exportAs: [\"bs-dropdown-toggle\"] });\n/** @nocollapse */\nBsDropdownToggleDirective.ctorParameters = () => [\n { type: ChangeDetectorRef },\n { type: BsDropdownDirective },\n { type: ElementRef },\n { type: Renderer2 },\n { type: BsDropdownState }\n];\nBsDropdownToggleDirective.propDecorators = {\n isDisabled: [{ type: HostBinding, args: ['attr.disabled',] }],\n isOpen: [{ type: HostBinding, args: ['attr.aria-expanded',] }],\n onClick: [{ type: HostListener, args: ['click', [],] }]\n};\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(BsDropdownToggleDirective, [{\n type: Directive,\n args: [{\n selector: '[bsDropdownToggle],[dropdownToggle]',\n exportAs: 'bs-dropdown-toggle',\n host: {\n '[attr.aria-haspopup]': 'true'\n }\n }]\n }], function () { return [{ type: ɵngcc0.ChangeDetectorRef }, { type: BsDropdownDirective }, { type: ɵngcc0.ElementRef }, { type: ɵngcc0.Renderer2 }, { type: BsDropdownState }]; }, { isDisabled: [{\n type: HostBinding,\n args: ['attr.disabled']\n }], isOpen: [{\n type: HostBinding,\n args: ['attr.aria-expanded']\n }], \n /**\n * @return {?}\n */\n onClick: [{\n type: HostListener,\n args: ['click', []]\n }] }); })();\nif (false) {\n /** @type {?} */\n BsDropdownToggleDirective.prototype.isDisabled;\n /** @type {?} */\n BsDropdownToggleDirective.prototype.isOpen;\n /**\n * @type {?}\n * @private\n */\n BsDropdownToggleDirective.prototype._subscriptions;\n /**\n * @type {?}\n * @private\n */\n BsDropdownToggleDirective.prototype._documentClickListener;\n /**\n * @type {?}\n * @private\n */\n BsDropdownToggleDirective.prototype._escKeyUpListener;\n /**\n * @type {?}\n * @private\n */\n BsDropdownToggleDirective.prototype._changeDetectorRef;\n /**\n * @type {?}\n * @private\n */\n BsDropdownToggleDirective.prototype._dropdown;\n /**\n * @type {?}\n * @private\n */\n BsDropdownToggleDirective.prototype._element;\n /**\n * @type {?}\n * @private\n */\n BsDropdownToggleDirective.prototype._renderer;\n /**\n * @type {?}\n * @private\n */\n BsDropdownToggleDirective.prototype._state;\n}\n\n/**\n * @fileoverview added by tsickle\n * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc\n */\nclass BsDropdownModule {\n // tslint:disable-next-line:no-any\n /**\n * @param {?=} config\n * @return {?}\n */\n static forRoot(config) {\n return {\n ngModule: BsDropdownModule,\n providers: [\n ComponentLoaderFactory,\n PositioningService,\n BsDropdownState\n ]\n };\n }\n}\nBsDropdownModule.ɵfac = function BsDropdownModule_Factory(t) { return new (t || BsDropdownModule)(); };\nBsDropdownModule.ɵmod = /*@__PURE__*/ ɵngcc0.ɵɵdefineNgModule({ type: BsDropdownModule });\nBsDropdownModule.ɵinj = /*@__PURE__*/ ɵngcc0.ɵɵdefineInjector({});\n(function () { (typeof ngDevMode === \"undefined\" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(BsDropdownModule, [{\n type: NgModule,\n args: [{\n declarations: [\n BsDropdownMenuDirective,\n BsDropdownToggleDirective,\n BsDropdownContainerComponent,\n BsDropdownDirective\n ],\n exports: [\n BsDropdownMenuDirective,\n BsDropdownToggleDirective,\n BsDropdownDirective\n ],\n entryComponents: [BsDropdownContainerComponent]\n }]\n }], null, null); })();\n(function () { (typeof ngJitMode === \"undefined\" || ngJitMode) && ɵngcc0.ɵɵsetNgModuleScope(BsDropdownModule, { declarations: [BsDropdownMenuDirective, BsDropdownToggleDirective, BsDropdownContainerComponent, BsDropdownDirective], exports: [BsDropdownMenuDirective, BsDropdownToggleDirective, BsDropdownDirective] }); })();\n\n/**\n * @fileoverview added by tsickle\n * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc\n */\n\n/**\n * @fileoverview added by tsickle\n * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc\n */\n\nexport { BsDropdownConfig, BsDropdownContainerComponent, BsDropdownDirective, BsDropdownMenuDirective, BsDropdownModule, BsDropdownState, BsDropdownToggleDirective };\n\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { RouterModule } from '@angular/router';\r\nimport { BsDropdownModule } from 'ngx-bootstrap/dropdown';\r\n\r\nimport { DocsModule } from '@app/shared/components/docs';\r\nimport { DropdownSectionComponent } from './dropdown-section.component';\r\nimport { DEMO_COMPONENTS } from './demos';\r\nimport { routes } from './demo-dropdown.routes';\r\n\r\n@NgModule({\r\n declarations: [\r\n DropdownSectionComponent,\r\n ...DEMO_COMPONENTS\r\n ],\r\n imports: [\r\n BsDropdownModule.forRoot(),\r\n CommonModule,\r\n FormsModule,\r\n DocsModule,\r\n RouterModule.forChild(routes)\r\n ],\r\n exports: [DropdownSectionComponent],\r\n entryComponents: [...DEMO_COMPONENTS]\r\n})\r\nexport class DemoDropdownModule {}\r\n","import { DropdownSectionComponent } from './dropdown-section.component';\r\n\r\nexport const routes = [{ path: '', component: DropdownSectionComponent }];\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'demo-accessibility',\r\n templateUrl: './accessibility.html'\r\n})\r\nexport class DemoAccessibilityComponent {}\r\n","The WAI ARIA standard defines an actual role=\"menu\" widget, but this is specific to application-like menus which trigger actions or functions. ARIA menus can only contain menu items, checkbox menu items, radio button menu items, radio button groups, and sub-menus.
Dropdowns, on the other hand, are designed to be generic and applicable to a variety of situations and markup structures. For instance, it is possible to create dropdowns that contain additional inputs and form controls, such as search fields or login forms. For this reason, ngx-bootstrap does not expect (nor automatically add) any of the role and aria- attributes required for true ARIA menus. Authors will have to include these more specific attributes themselves.
Default behavior: dropdown closes after outside click or pressing ESC
\r\nThis dropdown won't be closed after outside click or pressing ESC
\r\nThe dropdown is {{text}}\r\n {{message}}\r\n Dropdowns are toggleable, contextual overlays for displaying lists of links and more.\r\n They’re made interactive with the included dropdown directives.
\r\nThe easiest way to add the dropdown component to your app (will be added to the root module)
\r\nng add ngx-bootstrap --component dropdowns\r\n
Wrap the dropdown’s toggle (your button or link) and the dropdown menu within\r\n dropdown. Dropdowns can be triggered from <a> or <button>\r\n elements to better fit your potential needs.
Any <button> can became a dropdown toggle with few markup changes.\r\n Here’s how dropdown works with single button
isAnimated input or config option`,\r\n outlet: DemoDropdownAnimatedComponent\r\n },\r\n {\r\n title: 'Trigger by tag ',\r\n anchor: 'anchor-trigger',\r\n component: require('!!raw-loader!./demos/anchor-trigger/anchor-trigger.ts'),\r\n html: require('!!raw-loader!./demos/anchor-trigger/anchor-trigger.html'),\r\n outlet: DemoDropdownAnchorTriggerComponent\r\n },\r\n {\r\n title: 'Split button dropdowns',\r\n anchor: 'split-button',\r\n component: require('!!raw-loader!./demos/split/split.ts'),\r\n html: require('!!raw-loader!./demos/split/split.html'),\r\n description: `Similarly, create split button dropdowns with virtually the same markup as single\r\n button dropdowns, but with the addition of .dropdown-toggle-split for proper spacing\r\n around the dropdown caret.
Dropdown can be triggered by show, hide and\r\n toggle methods from directive\r\n
\r\n Use method toggle(true) if you want to toggle the dropdown or toggle(false)\r\n if you want to only close opened dropdown.\r\n
Dropdown can be shown or hidden by changing isOpen input property
Use isDisabled property to make dropdown disabled.
Add a disabled class to <a> for bootstrap 4 to make it as disabled.
Add a disabled class to <li> for bootstrap 3 to make it as disabled.
By default, a dropdown menu is automatically positioned 100% from the top and along\r\n the left side of its parent. Add class .dropdown-menu-right to a dropdownMenu\r\n to right align the dropdown menu.
By default, a dropdown menu closes on document click, even if you clicked on an element inside the dropdown.\r\n Use [insideClick]=\"true\" to allow click inside the dropdown
Append dropdown to body by adding container=\"body\" to the parent element.
To make dropdown's menu appear above toggle element set dropup property as true
Separate groups of related menu items with a .divider for bootstrap 3 and .dropdown-divider for bootstrap 4.
Dropdown allows you to use any html markup inside of it
`,\r\n outlet: DemoDropdownCustomHtmlComponent\r\n },\r\n {\r\n title: 'Configuring defaults',\r\n anchor: 'config-defaults',\r\n component: require('!!raw-loader!./demos/config/config.ts'),\r\n html: require('!!raw-loader!./demos/config/config.html'),\r\n description: `It is possible to override default dropdown config partially or completely.
`,\r\n outlet: DemoDropdownConfigComponent\r\n },\r\n {\r\n title: 'Visibility Events',\r\n anchor: 'visibility-events',\r\n component: require('!!raw-loader!./demos/visibility-events/visibility-events.ts'),\r\n html: require('!!raw-loader!./demos/visibility-events/visibility-events.html'),\r\n description: `You can subscribe to dropdown's visibility events
`,\r\n outlet: DemoDropdownVisibilityEventsComponent\r\n },\r\n {\r\n title: 'State change event',\r\n anchor: 'state-change-event',\r\n component: require('!!raw-loader!./demos/state-change-event/state-change-event.ts'),\r\n html: require('!!raw-loader!./demos/state-change-event/state-change-event.html'),\r\n description: `You can subscribe to dropdown's state change event (isOpenChange).
Use autoClose property to change dropdown's default behavior
Default behavior: dropdown closes after outside click or pressing ESC
\\r\\nThis dropdown won't be closed after outside click or pressing ESC
\\r\\nThe dropdown is {{text}}\\r\\n {{message}}\\r\\n