Home Angular Angular Module To Detect Page Events Outside Your Wrapped Component | NGX Page Click

Angular Module To Detect Page Events Outside Your Wrapped Component | NGX Page Click

Angular webcodeflow · January 23, 2022 · Comments off

ngx-page-click is an Angular module that handles user clicks when they click outside the wrapped component.

hide div when click outside angular, click outside angular stackblitz, click outside directive angular, handle click outside react hooks, detect click outside element

Click Effect Inspired By Google’s Material Design | Wave.js

How to make use of it:

Installation:

# NPM
$ npm install ngx-page-click --save

1. You will need to add a NgxPageClickModule to your application module.

...
import { NgxPageClickModule } from 'ngx-page-click';
...
@NgModule({
  declarations: [
    YourAppComponent
  ],
  imports: [
    ...
    NgxPageClickModule,
    ...
  ],
  providers: [],
  bootstrap: [YourAppComponent]
})

export class YourAppComponent {}

2. Then, you can use the component in your templates, and pass the configuration data to the component itself.

<div class="item">
  <ngx-page-click
    [disabled]="disabled"
    [outsideClickHandler]="outsideClickHandler"
    [listenTo]="on"
  >
    <div><p>Content goes here</p></div>
  </ngx-page-click>
</div>

Handle Click Outside, NGX Page Click Plugin/Github, react click outside npm, react detect click inside component