Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including ngx-page-click with all npm packages installed. Try it out:

require("@angular/common/package.json"); // @angular/common is a peer dependency. require("@angular/core/package.json"); // @angular/core is a peer dependency. var ngxPageClick = require("ngx-page-click")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

ngx-page-click v1.0.5

Angular module to detect page events outside your wrapped component. Flexible and easy, how it should be ⇢

NGX Page Click

Dependency Status npm

NPM NPM

Build Status Coverage Status npm bundle size (minified + gzip) npm

ngx-page-click in action

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

Try out our demo on Stackblitz!

Install

You can get it on NPM installing ngx-page-click module as a project dependency.

npm install ngx-page-click --save

Setup

You'll need to add NgxPageClickModule to your application module. So that, the <ngx-page-click> components will be accessible in your application.

...
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;
<div class="item">
  <ngx-page-click
    [disabled]="disabled"
    [outsideClickHandler]="outsideClickHandler"
    [listenTo]="on"
  >
    <div><p>Content goes here</p></div>
  </ngx-page-click>
</div>

Development

Run demo locally

  1. This project uses Angular CLI 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 <patch|minor|major> --contents=dist/ngx-page-click

For more details, please check np package on npmjs.com

Contribute

For any type of contribution, please follow the instructions in CONTRIBUTING.md and read CODE_OF_CONDUCT.md files.

Author

Wilson Mendes (willmendesneto)

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free