{"_rev":"3-70c6cd04a74f87a4d12660aa6a117f55","time":{"created":"2025-05-23T06:43:35.040Z","modified":"2025-05-23T06:43:35.497Z","0.0.1":"2025-05-14T07:32:08.005Z","0.0.2":"2025-05-23T06:43:35.228Z"},"_id":"d-click-outside","name":"d-click-outside","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.2":{"name":"d-click-outside","version":"0.0.2","peerDependencies":{"@angular/common":"^19.2.0","@angular/core":"^19.2.0"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"description":"Angular directive to detect clicks outside an element โ€” useful for dropdowns, modals, cards and dialogs.","keywords":["angular","click outside","click outside trigger","trigger outside","angular directive","dropdown close","outside click","click outside directive","angular click detection","popover close","tooltip close","dialog close","card close","ng click outside","dismiss on outside click"],"module":"fesm2022/d-click-outside.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","default":"./fesm2022/d-click-outside.mjs"}},"_id":"d-click-outside@0.0.2","gitHead":"10bffcb3c10447b960c712aef538454c3f0e3600","_nodeVersion":"22.16.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-NIK6Ad+ecHKOkNGGQRK4GViqd2OJLaH7c0EGhdTCsN+IIm9EPpvlbAjvpsZ+MnOQc0LzdABJqnGmotsHC15E1w==","shasum":"f072ba27f25b136fbb2dc01348504699b3c5bd59","tarball":"https://registry.npmjs.org/d-click-outside/-/d-click-outside-0.0.2.tgz","fileCount":7,"unpackedSize":8200,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCID3HNJPrB3yTN4DqpIrerwy3dqLxM9mxtfoFxHDqKBKyAiEAyKc+Xxadp8BFHDCADOCj9m2zhZq8lvrtRenPs09+BVo="}]},"_npmUser":{"name":"dino_creationz","email":"dinoraj0413@gmail.com"},"directories":{},"maintainers":[{"name":"dino_creationz","email":"dinoraj0413@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/d-click-outside_0.0.2_1747982615040_0.9182214264646851"},"_hasShrinkwrap":false}},"maintainers":[{"name":"dino_creationz","email":"dinoraj0413@gmail.com"}],"description":"Angular directive to detect clicks outside an element โ€” useful for dropdowns, modals, cards and dialogs.","keywords":["angular","click outside","click outside trigger","trigger outside","angular directive","dropdown close","outside click","click outside directive","angular click detection","popover close","tooltip close","dialog close","card close","ng click outside","dismiss on outside click"],"readme":"
\r\n\r\n

๐Ÿ‘‘ Dino_Creationz

\r\n

Angular Utilities โ€ข Built for Clean, Scalable Code

\r\n\r\n๐Ÿ’™ Built by Dinoraj\r\n\r\n
\r\n\r\n---\r\n\r\n# d-click-outside \"npm\"\r\nA lightweight, reusable Angular directive to detect clicks outside an element. \r\nPerfect for dropdowns, modals, popovers, sidebars, overlays, and tooltips.\r\n\r\nThis directive helps you identify and handle **click events outside the parent component**, making it ideal for building UI interactions like:\r\n- Close on outside click\r\n- Hide popovers/tooltips\r\n- Collapse dropdowns or side panels\r\n\r\n### Keywords:\r\nAngular click outside, click outside directive, outside click handler, close on outside click, Angular dropdown close, outside click detect, parent click detection, dismiss on click out\r\n\r\nBuilt with โค๏ธ by **[dino_creationz]**.\r\n\r\n\r\n## ๐Ÿ“ฆ Install\r\n\r\n```bash\r\nnpm install d-click-outside\r\n```\r\n\r\n---\r\n\r\n## ๐Ÿ”— Live Demo\r\n\r\nTry it on StackBlitz: \r\n๐Ÿ‘‰ [Open Example](https://stackblitz.com/edit/d-click-outside)\r\n\r\n## ๐Ÿš€ Quick Start\r\n\r\n### โœ… 1. Import the Directive\r\n\r\n#### For **Standalone Component**:\r\n```ts\r\nimport { DClickOutsideModule } from 'd-click-outside';\r\n```\r\n\r\n#### Or inside an **NgModule**:\r\n```ts\r\nimport { DClickOutsideModule } from 'd-click-outside';\r\n\r\n@NgModule({\r\n imports: [DClickOutsideModule],\r\n})\r\nexport class YourModule {}\r\n```\r\n\r\n---\r\n\r\n### โœ… 2. Use in HTML\r\n\r\n```html\r\n
\r\n \r\n\r\n
\r\n This is your dropdown.\r\n
\r\n
\r\n```\r\n\r\n---\r\n\r\n### โœ… 3. Component Code Example\r\n\r\n```ts\r\n@Component({\r\n standalone: true,\r\n selector: 'demo-dropdown',\r\n imports: [DClickOutsideModule],\r\n template: `\r\n
\r\n \r\n\r\n
\r\n Hello from dropdown!\r\n
\r\n
\r\n `\r\n})\r\nexport class DemoDropdownComponent {\r\n dropdownOpen = false;\r\n\r\n toggleDropdown() {\r\n this.dropdownOpen = !this.dropdownOpen;\r\n }\r\n\r\n closeDropdown() {\r\n this.dropdownOpen = false;\r\n }\r\n}\r\n```\r\n\r\n---\r\n\r\n## ๐Ÿ”ง Features\r\n\r\n- Emits when a click occurs outside the host element\r\n- No dependencies\r\n- Tiny footprint, easy to plug into any UI component\r\n\r\n---\r\n\r\n## ๐Ÿ›  Compatibility\r\n\r\n- Angular v16+\r\n- Works with both Standalone APIs and traditional NgModules\r\n\r\n---\r\n\r\n## ๐Ÿ‘จโ€๐Ÿ’ป Author\r\n\r\n**Dinoraj** \r\nSocial: **@dinoraj0413**\r\nGitHub: [github.com/dinoraj0413](https://github.com/dinoraj0413) \r\nCompany: **Dino_Creationz**\r\n\r\n---\r\n\r\n\r\n \"Buy\r\n\r\n\r\n## ๐Ÿงช License\r\n\r\nMIT\r\n","readmeFilename":"README.md"}