{"id":13535437,"url":"https://github.com/pleerock/ngx-dropdown","last_synced_at":"2025-04-02T01:30:47.893Z","repository":{"id":65411330,"uuid":"53152529","full_name":"pleerock/ngx-dropdown","owner":"pleerock","description":"Simple dropdown for your angular2 applications using bootstrap3.","archived":true,"fork":false,"pushed_at":"2017-04-03T07:56:59.000Z","size":28,"stargazers_count":65,"open_issues_count":11,"forks_count":39,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-05-19T14:45:38.279Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pleerock.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-04T17:19:57.000Z","updated_at":"2023-06-25T16:29:34.000Z","dependencies_parsed_at":"2023-01-22T06:55:15.694Z","dependency_job_id":null,"html_url":"https://github.com/pleerock/ngx-dropdown","commit_stats":null,"previous_names":["pleerock/ng2-dropdown"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pleerock%2Fngx-dropdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pleerock%2Fngx-dropdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pleerock%2Fngx-dropdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pleerock%2Fngx-dropdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pleerock","download_url":"https://codeload.github.com/pleerock/ngx-dropdown/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222389829,"owners_count":16976550,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T08:00:56.203Z","updated_at":"2024-11-02T23:31:23.883Z","avatar_url":"https://github.com/pleerock.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)"],"sub_categories":["Uncategorized","Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e"],"readme":"\u003e 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.\r\n\r\n# ngx-dropdown\r\n\r\nSimple dropdown for your angular2 applications using bootstrap3. Does not depend of jquery.\r\nIf you don't want to use it without bootstrap - simply create proper css classes. \r\nPlease star a project if you liked it, or create an issue if you have problems with it.\r\n\r\n## Installation\r\n\r\n1. Install npm module:\r\n    \r\n    `npm install ngx-dropdown --save`\r\n\r\n2. If you are using system.js you may want to add this into `map` and `package` config:\r\n    \r\n    ```json\r\n    {\r\n        \"map\": {\r\n            \"ngx-dropdown\": \"node_modules/ngx-dropdown\"\r\n        },\r\n        \"packages\": {\r\n            \"ngx-dropdown\": { \"main\": \"index.js\", \"defaultExtension\": \"js\" }\r\n        }\r\n    }\r\n    ```\r\n\r\n## Usage\r\n\r\n```html\r\n\u003cdiv class=\"dropdown\" dropdown [dropdownToggle]=\"false\" (onOpen)=\"doSomeActionOnOpen()\" (onClose)=\"doSomeActionOnClose()\"\u003e\r\n    \u003cbutton class=\"btn btn-primary\" dropdown-open\u003eMy Heroes\u003c/button\u003e\r\n    \u003cul class=\"dropdown-menu\"\u003e\r\n        \u003cli\u003e\u003ca\u003eBadman\u003c/a\u003e\u003c/li\u003e\r\n        \u003cli\u003e\u003ca\u003eSadman\u003c/a\u003e\u003c/li\u003e\r\n        \u003cli\u003e\u003ca\u003eLieman\u003c/a\u003e\u003c/li\u003e\r\n    \u003c/ul\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n* `dropdown` directive is used to specify where your dropdown starts\r\n    * `dropdownToggle` Indicates if dropdown should be closed when user double-clicks the dropdown opening button. Default is **true**.\r\n    * `(onOpen)` in dropdown is called when dropdown is opened\r\n    * `(onClose)` in dropdown is called when dropdown is closed\r\n* `dropdown-open` is used on `a`, `button` or any other clickable element to open a dropdown on its click\r\n* `dropdown-not-closable-zone` (not used in the example above, however is used in the examples below) is used\r\n    to prevent closing dropdown when you click on its elements. Its highly usable when you want to create\r\n    interactive dropdowns.\r\n\r\n## Sample\r\n\r\n```typescript\r\nimport {Component} from \"@angular/core\";\r\nimport {DropdownModule} from \"ngx-dropdown\";\r\n\r\n@Component({\r\n    selector: \"app\",\r\n    template: `\r\n\u003cdiv class=\"container\"\u003e\r\n\r\n    \u003c!-- a-style dropdown --\u003e\r\n    \u003cdiv class=\"dropdown\" dropdown\u003e\r\n        \u003ca dropdown-open\u003eMy Heroes\u003c/a\u003e\r\n        \u003cul class=\"dropdown-menu\"\u003e\r\n            \u003cli\u003e\u003ca href=\"#\"\u003eBadman\u003c/a\u003e\u003c/li\u003e\r\n            \u003cli\u003e\u003ca href=\"#\"\u003eSadman\u003c/a\u003e\u003c/li\u003e\r\n            \u003cli\u003e\u003ca href=\"#\"\u003eLieman\u003c/a\u003e\u003c/li\u003e\r\n        \u003c/ul\u003e\r\n    \u003c/div\u003e\r\n    \u003cbr/\u003e\r\n\r\n    \u003c!-- button dropdown --\u003e\r\n    \u003cdiv class=\"dropdown\" dropdown\u003e\r\n        \u003cbutton class=\"btn btn-primary\" dropdown-open\u003eMy Heroes\u003c/button\u003e\r\n        \u003cul class=\"dropdown-menu\"\u003e\r\n            \u003cli\u003e\u003ca href=\"#\"\u003eBadman\u003c/a\u003e\u003c/li\u003e\r\n            \u003cli\u003e\u003ca href=\"#\"\u003eSadman\u003c/a\u003e\u003c/li\u003e\r\n            \u003cli\u003e\u003ca href=\"#\"\u003eLieman\u003c/a\u003e\u003c/li\u003e\r\n        \u003c/ul\u003e\r\n    \u003c/div\u003e\r\n    \u003cbr/\u003e\r\n\r\n    \u003c!-- dropdown with items that are not closing dropdown when you click on them --\u003e\r\n    \u003cdiv class=\"dropdown\" dropdown\u003e\r\n        \u003cbutton class=\"btn btn-primary\" dropdown-open\u003eNot closable on items click\u003c/button\u003e\r\n        \u003cul class=\"dropdown-menu\" dropdown-not-closable-zone\u003e\r\n            \u003cli\u003e\u003ca href=\"#\"\u003eThis dropdown will\u003c/a\u003e\u003c/li\u003e\r\n            \u003cli\u003e\u003ca href=\"#\"\u003enot be closed when you\u003c/a\u003e\u003c/li\u003e\r\n            \u003cli\u003e\u003ca href=\"#\"\u003eselect any its items\u003c/a\u003e\u003c/li\u003e\r\n            \u003cli\u003e\u003ca href=\"#\"\u003ethis allows you to put\u003c/a\u003e\u003c/li\u003e\r\n            \u003cli\u003e\u003ca href=\"#\"\u003edynamic content into it\u003c/a\u003e\u003c/li\u003e\r\n        \u003c/ul\u003e\r\n    \u003c/div\u003e\r\n\r\n\u003c/div\u003e\r\n`\r\n})\r\nexport class AppComponent {\r\n\r\n}\r\n\r\n@NgModule({\r\n    imports: [\r\n        BrowserModule,\r\n        DropdownModule\r\n    ],\r\n    declarations: [\r\n        AppComponent\r\n    ],\r\n    bootstrap: [\r\n        AppComponent\r\n    ]\r\n})\r\nexport class AppModule {\r\n\r\n}\r\n\r\nplatformBrowserDynamic().bootstrapModule(AppModule);\r\n```\r\n\r\nTake a look on samples in [./sample](https://github.com/pleerock/ngx-dropdown/tree/master/sample) for more examples of\r\nusages.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpleerock%2Fngx-dropdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpleerock%2Fngx-dropdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpleerock%2Fngx-dropdown/lists"}