Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pleerock/ng2-dropdown
Simple dropdown for your angular2 applications using bootstrap3.
https://github.com/pleerock/ng2-dropdown
Last synced: 3 months ago
JSON representation
Simple dropdown for your angular2 applications using bootstrap3.
- Host: GitHub
- URL: https://github.com/pleerock/ng2-dropdown
- Owner: pleerock
- Archived: true
- Created: 2016-03-04T17:19:57.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-04-03T07:56:59.000Z (over 7 years ago)
- Last Synced: 2024-05-19T14:45:38.279Z (6 months ago)
- Language: TypeScript
- Size: 27.3 KB
- Stars: 65
- Watchers: 7
- Forks: 39
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-angular-components - ng2-dropdown - Simple dropdown for your angular2 applications using bootstrap3 (Uncategorized / Uncategorized)
README
> This repository is for demonstration purposes of how it can be implemented in Angular and is not maintaned. Please fork and maintain your own version of this repository.
# ngx-dropdown
Simple dropdown for your angular2 applications using bootstrap3. Does not depend of jquery.
If you don't want to use it without bootstrap - simply create proper css classes.
Please star a project if you liked it, or create an issue if you have problems with it.
## Installation
1. Install npm module:
`npm install ngx-dropdown --save`
2. If you are using system.js you may want to add this into `map` and `package` config:
```json
{
"map": {
"ngx-dropdown": "node_modules/ngx-dropdown"
},
"packages": {
"ngx-dropdown": { "main": "index.js", "defaultExtension": "js" }
}
}
```
## Usage
```html
My Heroes
```
* `dropdown` directive is used to specify where your dropdown starts
* `dropdownToggle` Indicates if dropdown should be closed when user double-clicks the dropdown opening button. Default is **true**.
* `(onOpen)` in dropdown is called when dropdown is opened
* `(onClose)` in dropdown is called when dropdown is closed
* `dropdown-open` is used on `a`, `button` or any other clickable element to open a dropdown on its click
* `dropdown-not-closable-zone` (not used in the example above, however is used in the examples below) is used
to prevent closing dropdown when you click on its elements. Its highly usable when you want to create
interactive dropdowns.
## Sample
```typescript
import {Component} from "@angular/core";
import {DropdownModule} from "ngx-dropdown";
@Component({
selector: "app",
template: `
`
})
export class AppComponent {
}
@NgModule({
imports: [
BrowserModule,
DropdownModule
],
declarations: [
AppComponent
],
bootstrap: [
AppComponent
]
})
export class AppModule {
}
platformBrowserDynamic().bootstrapModule(AppModule);
```
Take a look on samples in [./sample](https://github.com/pleerock/ngx-dropdown/tree/master/sample) for more examples of
usages.