feat(dropdown): add isOpenChange output (#2006)

valor-software · May 30, 2017 · 1c9f767 · 1c9f767
1 parent 1a516a6
commit 1c9f767
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 8 deletions.
diff --git a/demo/src/app/components/+dropdown/demos/basic/basic-link.html b/demo/src/app/components/+dropdown/demos/basic/basic-link.html
@@ -1,4 +1,4 @@
-<span dropdown (onShown)="onShown()" (onHidden)="onHidden()">
+<span dropdown (onShown)="onShown()" (onHidden)="onHidden()" (isOpenChange)="isOpenChange()">
   <a href dropdownToggle (click)="false">Click me for a dropdown, yo!</a>
     <ul *dropdownMenu class="dropdown-menu">
       <li *ngFor="let choice of items">

diff --git a/demo/src/app/components/+dropdown/demos/basic/basic-link.ts b/demo/src/app/components/+dropdown/demos/basic/basic-link.ts
@@ -14,4 +14,7 @@ export class DemoDropdownBasicLinkComponent {
   public onShown(): void {
     console.log('Dropdown is shown');
   }
+  public isOpenChange(): void {
+    console.log('Dropdown state is changed');
+  }
 }
diff --git a/demo/src/ng-api-doc.ts b/demo/src/ng-api-doc.ts
@@ -841,11 +841,15 @@ export const ngdoc: any = {
     "outputs": [
       {
         "name": "onHidden",
-        "description": "<p>Emits an event when the popover is hidden</p>\n"
+        "description": "<p>Emits an event when the dropdown is hidden</p>\n"
       },
       {
         "name": "onShown",
-        "description": "<p>Emits an event when the popover is shown</p>\n"
+        "description": "<p>Emits an event when the dropdown is shown</p>\n"
+      },
+      {
+        "name": "isOpenChange",
+        "description": "<p>Emits an event when the dropdown is shown or hidden</p>\n"
       }
     ],
     "properties": [

diff --git a/src/dropdown/bs-dropdown.directive.ts b/src/dropdown/bs-dropdown.directive.ts
@@ -89,6 +89,11 @@ export class BsDropdownDirective implements OnInit, OnDestroy {
     }
   }
 
+  /**
+   * Emits an event when isOpen change
+   */
+  @Output() isOpenChange: EventEmitter<any>;
+
   /**
    * Emits an event when the popover is shown
    */
@@ -113,18 +118,19 @@ export class BsDropdownDirective implements OnInit, OnDestroy {
   private _isInited = false;
 
   constructor(private _elementRef: ElementRef,
-    private _renderer: Renderer,
-    private _viewContainerRef: ViewContainerRef,
-    private _cis: ComponentLoaderFactory,
-    private _config: BsDropdownConfig,
-    private _state: BsDropdownState) {
+              private _renderer: Renderer,
+              private _viewContainerRef: ViewContainerRef,
+              private _cis: ComponentLoaderFactory,
+              private _config: BsDropdownConfig,
+              private _state: BsDropdownState) {
     // create dropdown component loader
     this._dropdown = this._cis
       .createLoader<BsDropdownContainerComponent>(this._elementRef, this._viewContainerRef, this._renderer)
       .provide({ provide: BsDropdownState, useValue: this._state });
 
     this.onShown = this._dropdown.onShown;
     this.onHidden = this._dropdown.onHidden;
+    this.isOpenChange = this._state.isOpenChange;
 
     // set initial dropdown state from config
     this._state.autoClose = this._config.autoClose;