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>