Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/willmendesneto/ngx-page-click
Angular module to detect page events outside your wrapped component. Flexible and easy, how it should be ⇢
https://github.com/willmendesneto/ngx-page-click
angular click hacktoberfest ng ngx page pageclick
Last synced: about 2 months ago
JSON representation
Angular module to detect page events outside your wrapped component. Flexible and easy, how it should be ⇢
- Host: GitHub
- URL: https://github.com/willmendesneto/ngx-page-click
- Owner: willmendesneto
- Created: 2019-01-01T12:43:04.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T02:42:00.000Z (almost 2 years ago)
- Last Synced: 2024-10-06T03:57:35.966Z (3 months ago)
- Topics: angular, click, hacktoberfest, ng, ngx, page, pageclick
- Language: TypeScript
- Homepage:
- Size: 1.72 MB
- Stars: 11
- Watchers: 2
- Forks: 0
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# NGX Page Click
[](https://david-dm.org/willmendesneto/ngx-page-click)
[](https://stackblitz.com/edit/ngx-page-click-sample)
[](https://npmjs.org/ngx-page-click)
[](https://npmjs.org/ngx-page-click)
[](https://circleci.com/gh/willmendesneto/ngx-page-click)
[](https://coveralls.io/r/willmendesneto/ngx-page-click?branch=master)
[](https://bundlephobia.com/result?p=ngx-page-click)
[](/LICENSE)
> Angular module to detect page events outside your wrapped component. Flexible and easy, how it should be ⇢
## Why a module to handle click outside the element?
The 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:
- Slide menu;
- Modals elements in the page;
- Wizards;
- Anything else. Use your imagination 😉
It's totally transparent for you and you can integrate easier in your application, improving your user experience 🎉
- [Demo](#demo)
- [Install](#install)
- [Setup](#setup)
- [Development](#development)
- [Contribute](#contribute)
## Demo
Try out our [demo on Stackblitz](https://ngx-page-click-sample.stackblitz.io)!
## Install
You can get it on NPM installing `ngx-page-click` module as a project dependency.
```shell
npm install ngx-page-click --save
```
## Setup
You'll need to add `NgxPageClickModule` to your application module. So that, the `` components will be accessible in your application.
```typescript
...
import { NgxPageClickModule } from 'ngx-page-click';
...
@NgModule({
declarations: [
YourAppComponent
],
imports: [
...
NgxPageClickModule,
...
],
providers: [],
bootstrap: [YourAppComponent]
})
export class YourAppComponent {}
```
After that, you can use the component in your templates, passing the configuration data into the component itself.
- `ngx-page-click`: Handle the user clicks when it clicks outside your wrapped component;
```html
Content goes here
```
## Development
### Run demo locally
1. 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
### Run tests
1. Run `npm test` for run tests. In case you want to test using watch, please use `npm run tdd`
### Publish
this project is using `np` package to publish, which makes things straightforward. EX: `np --contents=dist/ngx-page-click`
> For more details, [please check np package on npmjs.com](https://www.npmjs.com/package/np)
## Contribute
For 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.
## Author
**Wilson Mendes (willmendesneto)**
-
-
-