@ngx/popovers
| docs | core | click-outside
v.19.0.0

Click outside

The click outside directive handles clicks inside and outside HTMLElement. This directive is used by the ngx-floating component

Usage

Default usage:

  

    
      
1

    
      
2

    
      
3

    
      
4

    
      
5

    
      
6

    
      
7

    
      
8

    
      
9

    
      
10

    
      
11

    
      
12

    
      
13

    
      
14

    
      
15

    
      
16

    
      
17

    
      
18

    
      
19

    
      
20

    
      
21

    


  
@Component({
  selector: 'ngx-click-outside-example',
  standalone: true,
  imports: [ClickOutsideDirective],
  template: `
    <div
      ngxClickOutside
      (inside)="onInsideClicked($event)"
      (outside)="onOutsideClicked($event)"
    ></div>
  `,
})
export class ClickOutsideExample {
  onInsideClicked(el: EventTarget) {
    console.log('Inside click!', el);
  }

  onOutsideClicked(el: EventTarget) {
    console.log('Outside click!', el);
  }
}

Example

Try to click!

The click outside directive here