{"id":20014675,"url":"https://github.com/willmendesneto/ngx-page-click","last_synced_at":"2026-03-07T12:37:10.994Z","repository":{"id":33937336,"uuid":"163735875","full_name":"willmendesneto/ngx-page-click","owner":"willmendesneto","description":"Angular module to detect page events outside your wrapped component. Flexible and easy, how it should be  ⇢","archived":false,"fork":false,"pushed_at":"2026-01-13T20:49:30.000Z","size":1934,"stargazers_count":11,"open_issues_count":18,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-02-22T00:27:27.068Z","etag":null,"topics":["angular","click","hacktoberfest","ng","ngx","page","pageclick"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"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/willmendesneto.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-01T12:43:04.000Z","updated_at":"2021-08-06T22:12:05.000Z","dependencies_parsed_at":"2022-09-18T08:54:08.124Z","dependency_job_id":null,"html_url":"https://github.com/willmendesneto/ngx-page-click","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/willmendesneto/ngx-page-click","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willmendesneto%2Fngx-page-click","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willmendesneto%2Fngx-page-click/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willmendesneto%2Fngx-page-click/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willmendesneto%2Fngx-page-click/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/willmendesneto","download_url":"https://codeload.github.com/willmendesneto/ngx-page-click/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willmendesneto%2Fngx-page-click/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30213266,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-07T12:15:00.571Z","status":"ssl_error","status_checked_at":"2026-03-07T12:15:00.217Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","click","hacktoberfest","ng","ngx","page","pageclick"],"created_at":"2024-11-13T07:43:25.742Z","updated_at":"2026-03-07T12:37:10.976Z","avatar_url":"https://github.com/willmendesneto.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NGX Page Click\n\n[![Dependency Status](https://david-dm.org/willmendesneto/ngx-page-click.svg)](https://david-dm.org/willmendesneto/ngx-page-click)\n[![npm](https://img.shields.io/badge/stackblitz-online-orange.svg)](https://stackblitz.com/edit/ngx-page-click-sample)\n\n[![NPM](https://nodei.co/npm/ngx-page-click.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://npmjs.org/ngx-page-click)\n[![NPM](https://nodei.co/npm-dl/ngx-page-click.png?height=3\u0026months=3)](https://npmjs.org/ngx-page-click)\n\n[![Build Status](https://circleci.com/gh/willmendesneto/ngx-page-click.svg?style=shield)](https://circleci.com/gh/willmendesneto/ngx-page-click)\n[![Coverage Status](https://coveralls.io/repos/willmendesneto/ngx-page-click/badge.svg?branch=master)](https://coveralls.io/r/willmendesneto/ngx-page-click?branch=master)\n[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/ngx-page-click.svg)](https://bundlephobia.com/result?p=ngx-page-click)\n[![npm](https://img.shields.io/npm/l/express.svg?maxAge=2592000)](/LICENSE)\n\n![ngx-page-click in action](https://user-images.githubusercontent.com/1252570/50573610-9bb19580-0e2b-11e9-9306-0378196108fa.gif)\n\n\u003e Angular module to detect page events outside your wrapped component. Flexible and easy, how it should be ⇢\n\n## Why a module to handle click outside the element?\n\nThe idea of this component is make the process flexible, transparent and easier. So the main point is integrate this component with other components, such as:\n\n- Slide menu;\n- Modals elements in the page;\n- Wizards;\n- Anything else. Use your imagination 😉\n\nIt's totally transparent for you and you can integrate easier in your application, improving your user experience 🎉\n\n- [Demo](#demo)\n- [Install](#install)\n- [Setup](#setup)\n- [Development](#development)\n- [Contribute](#contribute)\n\n## Demo\n\nTry out our [demo on Stackblitz](https://ngx-page-click-sample.stackblitz.io)!\n\n## Install\n\nYou can get it on NPM installing `ngx-page-click` module as a project dependency.\n\n```shell\nnpm install ngx-page-click --save\n```\n\n## Setup\n\nYou'll need to add `NgxPageClickModule` to your application module. So that, the `\u003cngx-page-click\u003e` components will be accessible in your application.\n\n```typescript\n...\nimport { NgxPageClickModule } from 'ngx-page-click';\n...\n@NgModule({\n  declarations: [\n    YourAppComponent\n  ],\n  imports: [\n    ...\n    NgxPageClickModule,\n    ...\n  ],\n  providers: [],\n  bootstrap: [YourAppComponent]\n})\n\nexport class YourAppComponent {}\n\n```\n\nAfter that, you can use the component in your templates, passing the configuration data into the component itself.\n\n- `ngx-page-click`: Handle the user clicks when it clicks outside your wrapped component;\n\n```html\n\u003cdiv class=\"item\"\u003e\n  \u003cngx-page-click\n    [disabled]=\"disabled\"\n    [outsideClickHandler]=\"outsideClickHandler\"\n    [listenTo]=\"on\"\n  \u003e\n    \u003cdiv\u003e\u003cp\u003eContent goes here\u003c/p\u003e\u003c/div\u003e\n  \u003c/ngx-page-click\u003e\n\u003c/div\u003e\n```\n\n## Development\n\n### Run demo locally\n\n1. This project uses [Angular CLI](https://cli.angular.io/) as base. That means you just need to run `npm start` and access the link `http://localhost:4200` in your browser\n\n### Run tests\n\n1. Run `npm test` for run tests. In case you want to test using watch, please use `npm run tdd`\n\n### Publish\n\nthis project is using `np` package to publish, which makes things straightforward. EX: `np \u003cpatch|minor|major\u003e --contents=dist/ngx-page-click`\n\n\u003e For more details, [please check np package on npmjs.com](https://www.npmjs.com/package/np)\n\n## Contribute\n\nFor any type of contribution, please follow the instructions in [CONTRIBUTING.md](https://github.com/willmendesneto/ngx-page-click/blob/master/CONTRIBUTING.md) and read [CODE_OF_CONDUCT.md](https://github.com/willmendesneto/ngx-page-click/blob/master/CODE_OF_CONDUCT.md) files.\n\n## Author\n\n**Wilson Mendes (willmendesneto)**\n\n- \u003chttps://plus.google.com/+WilsonMendes\u003e\n- \u003chttps://twitter.com/willmendesneto\u003e\n- \u003chttp://github.com/willmendesneto\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwillmendesneto%2Fngx-page-click","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwillmendesneto%2Fngx-page-click","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwillmendesneto%2Fngx-page-click/lists"}