# UIB DropdownModule

## Prequisites

Add the `DropdownModule` module to your module imports:

```TS
import { DropdownModule } from '@uib/angular';

@NgModule({
  imports: [
    // ...
    DropdownModule,
    // ...
  ],
})
// ...
```

## UibDropdown

### Inputs

- `uibDropdown`: dropdown content (string, TemplateRef or ComponentRef)
- `uibDropdownDisabled`: disables the dropdown
- `uibDropdownTrigger`: dropdown event trigger (any permutation of: click, mouseenter, focus, tap, keydown.enter, input')
- `uibDropdownOptions`: dropdown options

### Outputs

- `uibDropdownAfterOpen`: emits event after dropdown opened
- `uibDropdownAfterClose`: emits event after dropdown closed

### Available DropdownOptions

- `alwaysVisible`: Forces the dropdown to always be visible
- `containerClass`: CSS class applied to the dropdown container  (default: null)
- `delayIn`: Delay in ms until dropdown is shown
- `delayOut`: Delay in ms until dropdown is closed
- `enableArrow`: enables the dropdown arrow element (default: false)
- `enableFallback`: enables detect available space and flip if not enough space available (default: false)
- `matchReferenceWidth`: matches the dropdown min-width with the reference element (default: false)
- `offset`: dropdown offset to the reference element (default: 0)
- `outerPadding`: dropdown offset to outer document (default: 8)
- `placement`: dropdown placement (default: 'bottom')

> You can override those options globally via `DROPDOWN_OPTIONS` token provider

### Examples

```HTML
<button
  uibButton
  [uibDropdown]="dropdown"
  [uibDropdownDisabled]="disabled"
  [uibDropdownTrigger]="trigger"
  [uibDropdownOptions]="{ delayIn, delayOut, enableArrow, enableFallback, matchReferenceWidth, offset, outerPadding, placement }"
>
  show dropdown
</button>
<ng-template #dropdown>
  <div style="width: 100px">
    <p class="uib-skeleton uib-skeleton--text uib-skeleton--long">
    </p>
    <br />
    <p class="uib-skeleton uib-skeleton--text uib-skeleton--short"></p>
    <br />
    <p class="uib-skeleton uib-skeleton--text"></p>
    <br />
    <p class="uib-skeleton uib-skeleton--text"></p>
  </div>
</ng-template>
```