{"id":15664813,"url":"https://github.com/zurfyx/angular-custom-dropdown","last_synced_at":"2025-05-05T23:42:46.550Z","repository":{"id":57178292,"uuid":"90855802","full_name":"zurfyx/angular-custom-dropdown","owner":"zurfyx","description":"Angular2+ Dropdown. Simple dropdowns without relying on CSS frameworks.","archived":false,"fork":false,"pushed_at":"2019-02-12T14:19:55.000Z","size":1271,"stargazers_count":16,"open_issues_count":3,"forks_count":11,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-19T07:14:47.442Z","etag":null,"topics":["angular","angular5","dropdown","dropdown-menus"],"latest_commit_sha":null,"homepage":"https://zurfyx.github.io/angular-custom-dropdown","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zurfyx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-10T11:16:03.000Z","updated_at":"2023-05-08T13:25:35.000Z","dependencies_parsed_at":"2022-09-14T02:10:24.186Z","dependency_job_id":null,"html_url":"https://github.com/zurfyx/angular-custom-dropdown","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zurfyx%2Fangular-custom-dropdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zurfyx%2Fangular-custom-dropdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zurfyx%2Fangular-custom-dropdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zurfyx%2Fangular-custom-dropdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zurfyx","download_url":"https://codeload.github.com/zurfyx/angular-custom-dropdown/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252252614,"owners_count":21718765,"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":["angular","angular5","dropdown","dropdown-menus"],"created_at":"2024-10-03T13:44:13.542Z","updated_at":"2025-05-05T23:42:46.530Z","avatar_url":"https://github.com/zurfyx.png","language":"TypeScript","readme":"# Angular Custom Dropdown\n\n[![npm Version](https://img.shields.io/npm/v/angular-custom-dropdown.svg)](https://www.npmjs.com/package/angular-custom-dropdown)\n[![Build Status](https://travis-ci.org/zurfyx/angular-custom-dropdown.svg?branch=master)](https://travis-ci.org/zurfyx/angular-custom-dropdown)\n\n\u003e Create simple Angular2+ dropdowns without relying on CSS frameworks.\n\n## Demo\n\nhttps://zurfyx.github.io/angular-custom-dropdown\n\n## Features\n\n- Light and simple\n- No CSS framework tied\n- Compatible with [Bootstrap](https://getbootstrap.com/docs/4.0/components/dropdowns/)\n\n## Install\n\n```\nnpm install angular-custom-dropdown\n```\n\n## Getting started\n\n[my-module.module.ts](https://github.com/zurfyx/angular-custom-modal/blob/master/example/app/app.module.ts)\n\n```\nimport { DropdownModule } from 'angular-custom-dropdown';\n\n@NgModule({\n  imports: [\n    ...\n    DropdownModule,\n  ],\n```\n\n[my-module.component.ts](https://github.com/zurfyx/angular-custom-modal/blob/master/example/app/app.component.ts)\n\n∅\n\n[my-module.component.html](https://github.com/zurfyx/angular-custom-modal/blob/master/example/app/app.component.html)\n\n```\n\u003cdiv class=\"dropdown\" dropdown\u003e\n  \u003ch1 class=\"dropdown-toggle\" dropdownToggle\u003eAngular Custom Dropdown ▼\u003c/h1\u003e\n  \u003cul class=\"dropdown-menu\" dropdownMenu\u003e\n    \u003cli\u003e\u003ca class=\"neat\" href=\"https://github.com/zurfyx/angular-custom-modal\" rel=\"noopener\" target=\"_blank\"\u003eCheck it out @ GitHub\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca class=\"neat\" href=\"#\"\u003e...\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n\n[my-module.component.css](https://github.com/zurfyx/angular-custom-modal/blob/master/example/app/app.component.scss) [Optional]\n\nStyles are optional and up to you. Below are the ones that the demo page uses, but you can also use Bootstrap styles for that, or any other compatible library or framework. For most cases you'll just need to adapt the class names of the HTML snippet above.\n\nIf you want to read more about styling see the [next section](#about-styling).\n\n```\n.dropdown  {\n  position: relative;\n}\n\n.dropdown-menu {\n  position: absolute;\n  display: block;\n  align-self: center;\n  width: 80%;\n  opacity: 0;\n  margin: -.25rem 0 0 10%; // -.25rem top (animation).\n  padding: 0.25rem;\n  list-style-type: none;\n  background-color: #fff;\n  border-radius: 4px;\n  transition: .2s all ease-in;\n}\n\n.dropdown-menu li {\n  padding: .5rem .5rem;\n}\n\n.dropdown-menu li + li {\n  border-top: 1px solid #e1e1e1;\n  padding-top: .5rem;\n}\n\n.dropdown-menu li \u003e a {\n  display: block;\n  border-radius: 4px;\n  padding: 1rem 1.5rem;\n  transition: .2s background-color ease-in;\n}\n\n.dropdown-menu li \u003e a:hover {\n  background-color: #e9e9e9;\n}\n\n.dropdown.open .dropdown-menu {\n  opacity: 1;\n  margin-top: 0;\n}\n\na.neat {\n  color: inherit;\n  text-decoration: none;\n}\n```\n\n## About styling\n\nThis library carries no predefined styles, which prevents clashing with your own set of styles or CSS frameworks. You can find the demo copy-paste dropdown styles above.\n\nA minimal version (purely dropdown functionality) would look like the following:\n\n```\n.dropdown  {\n  position: relative;\n}\n\n.dropdown-menu {\n  position: absolute;\n  display: block;\n  opacity: 0;\n}\n\n.dropdown.open .dropdown-menu {\n  opacity: 1;\n}\n```\n\nYou can then add your own set of styles to make it look beautiful, or use a CSS framework. Note that\nthe classes naming [matches Bootstrap](https://getbootstrap.com/docs/4.0/components/dropdowns/#examples) (and it is actually compatible with it!).\n\n### Aligning\n\nOur demo example is centered with the parent container, and we do so through CSS. You can easy move the `.dropdown-menu` wherever you need it.\n\n**Left**\n\n*By default.*\n\n**Center**\n\n```\n.dropdown-menu {\n  left: 50%;\n  transform: translateX(-50%);\n}\n```\n\n**Right**\n\n```\n.dropdown-menu {\n  right: 0;\n}\n```\n\n## Advanced\n\nAll directives are exported using the same selector names, which allows you to access inner methods on your own templates or components.\n\n### Accessing the dropdown reference in your own template\n\n```\n\u003cspan (click)=\"myDropdown.toggle()\"\u003eWhile the toggle element is outside the dropdown, it has a reference to dropdown.\u003c/span\u003e\n\u003cdiv #myDropdown=dropdown dropdown\u003e\n  ...\n\u003c/div\u003e\n```\n\n### Accessing the dropdown reference in your own component\n\nAll the examples below require the HTML to have a reference such as the following:\n\n```\n\u003cdiv #myDropdown=dropdown dropdown\u003e...\u003c/div\u003e\n```\n\nToggle dropdown:\n\n```\nimport { DropdownDirective } from 'angular-custom-dropdown';\n...\n@ViewChild('myDropdown') myDropdown: DropdownDirective;\n\nopenNow() {\n  this.myDropdown.open();\n}\n```\n\nSubscribing to [dropdown status changes](https://github.com/zurfyx/angular-custom-modal/blob/master/example/app/app.component.ts):\n\n```\nimport { DropdownDirective, TOGGLE_STATUS } from 'angular-custom-dropdown';\n...\n@ViewChild('myDropdown') myDropdown: DropdownDirective;\n\nngOnInit() {\n  this.myDropdown.statusChange()\n    .subscribe((status: TOGGLE_STATUS) =\u003e {\n      let statusValue: String;\n      if (status === TOGGLE_STATUS.OPEN) {\n        statusValue = 'Opened';\n      } else if (status === TOGGLE_STATUS.CLOSE) {\n        statusValue = 'Closed';\n      }\n      console.info(`Dropdown status changed to \"${statusValue}\".`);\n    });\n}\n```\n\nWarning! This example has been shortened for the sake of readability. Subscriptions should always be cleaned up on destroy (see the full source code [here](https://github.com/zurfyx/angular-custom-modal/blob/master/example/app/app.component.ts)).\n\n## Special thanks\n\nTo [pleerock](https://github.com/pleerock) for [ngx-dropdown](https://github.com/pleerock/ngx-dropdown), of which I took some design ideas.\n\n## License\n\nMIT © [Gerard Rovira Sánchez](//zurfyx.com)","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzurfyx%2Fangular-custom-dropdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzurfyx%2Fangular-custom-dropdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzurfyx%2Fangular-custom-dropdown/lists"}