feat: allow two-way binding on isOpen

- Implement the canonical `isOpenChange` event to allow two-way binding
- Update documentation example to use the new two-way binding

This allows bindings like `<… dropdown [(isOpen)]="my.isOpen">` to prevent the internal and external flags from going out-of-sync whenever the dropdown is closed automatically.

From the angular2 documentation:
> […] Angular matches [(x)] to an x input property for property binding and an xChange output property for event binding.

components/dropdown/dropdown.directive.ts

@@ -20,6 +20,7 @@ export class Dropdown implements OnInit, OnDestroy {
  @Input() public appendToBody:boolean;
 
  @Output() public onToggle:EventEmitter<boolean> = new EventEmitter();
+ @Output() public isOpenChange:EventEmitter<boolean> = new EventEmitter();
  @HostBinding('class.dropdown') private addClass = true;
 
  private _isOpen:boolean;
@@ -52,6 +53,7 @@ export class Dropdown implements OnInit, OnDestroy {
  this.selectedOption = null;
  }
  this.onToggle.emit(this.isOpen);
+ this.isOpenChange.emit(this.isOpen);
  // todo: implement call to setIsOpen if set and function
  }
 

demo/components/dropdown/dropdown-demo.html

@@ -12,7 +12,7 @@
  </span>
 
  <!-- Single button -->
- <div class="btn-group" dropdown [isOpen]="status.isopen">
+ <div class="btn-group" dropdown [(isOpen)]="status.isopen">
  <button id="single-button" type="button" class="btn btn-primary" dropdownToggle [disabled]="disabled">
  Button dropdown <span class="caret"></span>
  </button>