Simple angular dropdown component.
npm install angular-dropdownA simple angular dropdown component
``bash`
$ yarn add angular-dropdown ng-wormhole
Import AngularDropdownModule in your app:
`typescript
import { NgModule } from '@angular/core';
import { AngularDropdownModule } from 'angular-dropdown';
@NgModule({
imports: [AngularDropdownModule]
})
export class AppModule {}
`
In your SASS stylesheet:
`scss`
@import '~angular-dropdown/styles';
`html`
_renderInPlace: boolean = false_
Should the component render its children in place?
`html`
...
_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
_open: void_
Triggers when opening the dropdown
`html`
...
_close: void_
Triggers when closing the dropdown
`html`
...
` html`
...
_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.
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.
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.
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.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use ng help` or go check out the Angular CLI README.
This component is heavily inspired by
ember-basic-dropdown.
Contributions from @cibernox, @locks and others.