fix(dropdown): Add the dropdown-menu class to dropdown menus

fixes #541, closes #732
valor-software · Jul 14, 2016 · 1bc316f · 1bc316f
1 parent fdbd493
commit 1bc316f
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/components/dropdown/dropdown-menu.directive.ts b/components/dropdown/dropdown-menu.directive.ts
@@ -1,10 +1,16 @@
-import {Directive, ElementRef, Host, OnInit} from '@angular/core';
+import {Directive, ElementRef, Host, OnInit, HostBinding} from '@angular/core';
 import {DropdownDirective} from './dropdown.directive';
 
 @Directive({selector: '[dropdownMenu]'})
 export class DropdownMenuDirective implements OnInit {
   public dropdown:DropdownDirective;
   public el:ElementRef;
+
+  /* tslint:disable:no-unused-variable */
+  @HostBinding('class.dropdown-menu')
+  public addClass:boolean = true;
+  /* tslint:enable:no-unused-variable */
+
   public constructor(@Host() dropdown:DropdownDirective, el:ElementRef) {
     this.dropdown = dropdown;
     this.el = el;

diff --git a/components/dropdown/readme.md b/components/dropdown/readme.md
@@ -8,7 +8,7 @@ import { DROPDOWN_DIRECTIVES } from 'ng2-bootstrap/components/dropdown';
 ```html
 <!-- dropdown directive marks a dropdown root element -->
 <div dropdown>
-  <!-- click on dropdown-toggle toogles dropdown state, optional -->
+  <!-- click on dropdown-toggle toggles dropdown state, optional -->
   <div dropdownToggle></div>
   <!-- dropdown-menu holds content which will be shown -->
   <div dropdownMenu>

diff --git a/demo/components/dropdown/dropdown-demo.html b/demo/components/dropdown/dropdown-demo.html
@@ -16,7 +16,7 @@
     <button id="single-button" type="button" class="btn btn-primary" dropdownToggle [disabled]="disabled">
       Button dropdown <span class="caret"></span>
     </button>
-    <ul class="dropdown-menu" dropdownMenu role="menu" aria-labelledby="single-button">
+    <ul dropdownMenu role="menu" aria-labelledby="single-button">
       <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
       <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
       <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>