CngxClickOutside

DirectivePrimaryv0.1.0

projects/common/interactive/keyboard/click-outside.directive.ts

Import#

import { CngxClickOutside } from '@cngx/common/interactive'

Description#

Emits when the user interacts outside the host element.

Listens for a configurable DOM event on the document and checks whether the event target is outside the host element's subtree. Useful for closing dropdowns, popovers, modals, and any overlay that should dismiss on outside interaction.

The event type defaults to 'pointerdown' which covers mouse, touch, and pen input. Change it via the [eventType] input.

<div cngxClickOutside (clickOutside)="closeDropdown()" [enabled]="isOpen()">
  <ul>…menu items…</ul>
</div>

With custom event type

<div cngxClickOutside [eventType]="'click'" (clickOutside)="dismiss()">…</div>

https://cngxjs.github.io/cngx/examples/#/common/interactive/gestures/click-outside/dropdown https://cngxjs.github.io/cngx/examples/#/common/interactive/gestures/click-outside/enabled-toggle

Metadata#

Selector: [cngxClickOutside]
Export as: cngxClickOutside

Relationships

Used by10

componentCngxActionMultiSelectMulti-value combobox with inline quick-create.

componentCngxActionSelectSingle-value autocomplete with inline quick-create.

componentCngxComboboxTag-input style multi-value combobox.

componentCngxMultiSelectMulti-select sibling of {@link CngxSelect}.

componentCngxReorderableMultiSelectMulti-select with pointer-drag and keyboard reorder of selected values (modifier + arrow, Home/End).

componentCngxSelectNative-feeling single-select dropdown.

componentCngxSelectShellNative-feeling single-value dropdown with **declarative options** - consumers project `` / `` children and the shell…

componentCngxTabOverflowOpt-in overflow indicator for ``.

componentCngxTreeSelectTree-structured multi-select.

componentCngxTypeaheadSingle-value async autocomplete.

Index#

Inputs

enabled eventType

Outputs

clickOutside

Inputs#

enabled#boolean

input()

When false the directive is disabled and no events are emitted.

default true

eventType#"pointerdown" | "click" | "mousedown" | "touchstart"

input()

The DOM event type to listen for. 'pointerdown' covers both mouse and touch.

default 'pointerdown'

Outputs#

clickOutside#PointerEvent | MouseEvent | TouchEvent

output()

Emitted when the user interacts outside the host element.