fix(dropdown): fixed onShow and onHidden events for inline dropdown m…

…odule (#1951) * Add output emiters * fix(dropdown): remove unnecessary event binding and method
valor-software · May 12, 2017 · ead8d52 · ead8d52
1 parent d069757
commit ead8d52
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 13 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 (isOpenChange)="toggled($event)">
+<span dropdown (onShown)="onShown()" (onHidden)="onHidden()">
   <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
@@ -5,10 +5,13 @@ import { Component } from '@angular/core';
   templateUrl: './basic-link.html'
 })
 export class DemoDropdownBasicLinkComponent {
-  public items:string[] = ['The first choice!',
+  public items: string[] = ['The first choice!',
     'And another choice for you.', 'but wait! A third!'];
 
-  public toggled(open:boolean):void {
-    console.log('Dropdown is now: ', open);
+  public onHidden(): void {
+    console.log('Dropdown is hidden');
+  }
+  public onShown(): void {
+    console.log('Dropdown is shown');
   }
 }
diff --git a/src/dropdown/bs-dropdown.directive.ts b/src/dropdown/bs-dropdown.directive.ts
@@ -93,6 +93,7 @@ export class BsDropdownDirective implements OnInit, OnDestroy {
    * Emits an event when the popover is shown
    */
   @Output() onShown: EventEmitter<any>;
+
   /**
    * Emits an event when the popover is hidden
    */
@@ -112,15 +113,15 @@ 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});
+      .provide({ provide: BsDropdownState, useValue: this._state });
 
     this.onShown = this._dropdown.onShown;
     this.onHidden = this._dropdown.onHidden;
@@ -133,7 +134,7 @@ export class BsDropdownDirective implements OnInit, OnDestroy {
     // fix: seems there are an issue with `routerLinkActive`
     // which result in duplicated call ngOnInit without call to ngOnDestroy
     // read more: https://github.com/valor-software/ngx-bootstrap/issues/1885
-    if (this._isInited) {return;}
+    if (this._isInited) { return; }
     this._isInited = true;
 
     this._showInline = !this.container;
@@ -157,7 +158,7 @@ export class BsDropdownDirective implements OnInit, OnDestroy {
     // attach dropdown menu inside of dropdown
     if (this._showInline) {
       this._state.dropdownMenu
-        .then((dropdownMenu:BsComponentRef<BsDropdownMenuDirective>) => {
+        .then((dropdownMenu: BsComponentRef<BsDropdownMenuDirective>) => {
           this._inlinedMenu = dropdownMenu.viewContainer.createEmbeddedView(dropdownMenu.templateRef);
         });
     }
@@ -175,6 +176,7 @@ export class BsDropdownDirective implements OnInit, OnDestroy {
     if (this._showInline) {
       this._isInlineOpen = true;
       this._state.isOpenChange.emit(true);
+      this.onShown.emit(true);
       return;
     }
 
@@ -191,13 +193,14 @@ export class BsDropdownDirective implements OnInit, OnDestroy {
         this._dropdown
           .attach(BsDropdownContainerComponent)
           .to(this.container)
-          .position({attachment: _placement})
+          .position({ attachment: _placement })
           .show({
             content: dropdownMenu.templateRef,
             placement: _placement
           });
 
         this._state.isOpenChange.emit(true);
+        this.onShown.emit(true);
       });
   }
 
@@ -217,6 +220,7 @@ export class BsDropdownDirective implements OnInit, OnDestroy {
     }
 
     this._state.isOpenChange.emit(false);
+    this.onHidden.emit(true);
   }
 
   /**