Angular Dropdown

A simple angular dropdown component

Installation

$ yarn add angular-dropdown ng-wormhole

Import AngularDropdownModule in your app:

import { NgModule } from '@angular/core';
import { AngularDropdownModule } from 'angular-dropdown';
 
@NgModule({
  imports: [AngularDropdownModule]
})
export class AppModule {}

In your SASS stylesheet:

@import '~angular-dropdown/styles';

Example usage

<div ngDropdown>
  <button ngDropdownControl>Open Dropdown!</button>
  <div ngDropdownContent dropdownClass="slide-fade">
    <ul>
      <li><a href="#">Dropdown Item 1</a></li>
      <li><a href="#">Dropdown Item 2</a></li>
      <li><a href="#">Dropdown Item 3</a></li>
      <li><a href="#">Dropdown Item 4</a></li>
    </ul>
  </div>
</div>

ngDropdown

Inputs

renderInPlace: boolean = false Should the component render its children in place?

<div ngDropdown [renderInPlace]="true">
  <button ngDropdownControl>Open Dropdown!</button>
  <div ngDropdownContent>
    ...
  </div>
</div>

calculatePosition: (trigger: Element, dropdown: Element, options: any) => any Overwrite the default calculatePosition function

calculateInPlacePosition: (trigger: Element, dropdown: Element, options: any) => any Overwrite the default calculatePosition function used when dropdown is rendered in-place.

disabled: boolean = false Disable the dropdown

beforeOpen: () => boolean = null Hook before the dropdown is opened, return false to cancel it.

beforeClose: () => boolean = null Hook before the dropdown is closed, return false to cancel it.

verticalPosition: 'auto' | 'above' | 'below' Vertical positioning

horizontalPosition: 'auto' | 'right' | 'center' | 'left' Horizontal positioning

Outputs

open: void Triggers when opening the dropdown

<div ngDropdown (open)="doSomething()">
  <button ngDropdownControl>Open Dropdown!</button>
  <div ngDropdownContent>
    ...
  </div>
</div>

close: void Triggers when closing the dropdown

<div ngDropdown (close)="doSomething()">
  <button ngDropdownControl>Open Dropdown!</button>
  <div ngDropdownContent>
    ...
  </div>
</div>

Programatically open/close

<div ngDropdown #dropdown="ngDropdown">
  <button (click)="ngDropdown.open()">Open Dropdown!</button>
  <button (click)="ngDropdown.close()">Close Dropdown!</button>
 
  <div ngDropdownContent>
    ...
  </div>
</div>

ngDropdownContent

Inputs

dropdownClass: string Class to apply on the dropdown element, classes with animations will be properly animated.

transitioningInClass: string = 'ng-dropdown-content--transitioning-in' Class which will be applied when the dropdown element is inserted into the DOM.

transitionedInClass: string = 'ng-dropdown-content--transitioned-in' Class which will be applied once the transitioningInClass animation finished.

transitioningOutClass: string = 'ng-dropdown-content--transitioning-out' Class which will be applied when closing the dropdown.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

Credits

This component is heavily inspired by ember-basic-dropdown. Contributions from @cibernox, @locks and others.