{{title}}

#### Dropdown:

Dropdown component are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included dropdown directives.

Base specifications: bootstrap 3 or bootstrap 4.

#### Dropdown Example:

##### toogle dropdown

    Simple dropdown is now: {{simpleOpen}}

Click me for a dropdown, yo!

#### Code Example:

##### mockup

                <!-- simple dropdown -->
                <span dropdown (onToggle)="toggled($event)">
                  <a href id="simple-dropdown" dropdownToggle>Click me for a dropdown, yo!</a>
                  <ul class="dropdown-menu" aria-labelledby="simple-dropdown">
                    <li *ngFor="let choice of items"><a class="dropdown-item" href="#">{{choice}}</a></li>
                  </ul>
                 </span>
                 <!-- single button dropdown -->
                 <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>
                   <ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
                     <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
                     ...
                   </ul>
                 </div>
                 <!-- Single button with keyboard nav -->
                 <div class="btn-group" dropdown keyboardNav="true">
                   <button id="simple-btn-keyboard-nav" type="button" class="btn btn-primary" dropdownToggle>Dropdown with keyboard navigation <span class="caret"></span></button>
                   <ul class="dropdown-menu" role="menu" aria-labelledby="simple-btn-keyboard-nav">
                     <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
                     ...
                   </ul>
                 </div>

##### typescript

                export class DropdownComponent {
                  public title = 'Dropdown Component';
                  public disabled: boolean = false;
                  public simpleOpen:boolean=false;
                  public status: {isopen: boolean} = {isopen: false};
                  public items: Array < string >= ['The first choice', 'And another choice for you.', 'but wait! A third!'];
                  public toggleDropdown($event: MouseEvent): vodi {
                    $event.preventDefault();
                    $event.stopPropagation();
                    this.status.isopen = !this.status.isopen;
                  }
                  public toggled(open:boolean):void{
                    this.simpleOpen=open;
                  }
                }

#### Dropdown properties:

- `isOpen` (`?boolean=false`) - if `true` dropdown will be opened
- `autoClose` (`?string='always'`) - behaviour vary:
  - `nonInput` - (default) automatically closes the dropdown when any of its elements is clicked — as long as the clicked element is not an `input` or a `textarea`.
  - `always` - automatically closes the dropdown when any of its elements is clicked
  - `outsideClick` - closes the dropdown automatically only when the user clicks any element outside the dropdown
  - `disabled` - disables the auto close. You can then control the open/close status of the dropdown manually, by using `is-open`. Please notice that the dropdown will still close if the toggle is clicked, the `esc` key is pressed or another dropdown is open
- `keyboardNav` (`?boolean=false`) - if `true` will enable navigation of dropdown list elements with the arrow keys
- `appendToBody` (not yet tested) (`?boolean=false`) - if `true` `dropdownMenu` content will be appended to the body. This is useful when the dropdown button is inside a div with `overflow: hidden`, and the menu would otherwise be hidden

#### Dropdown events:

- `onToggle` - fired when `dropdown` toggles, `$event:boolean` equals dropdown `isOpen` state

#### Dropdown toggle properties:

- `disabled` (`?boolean=false`) - if `true` dropdown toggle will be disabled