CngxDialogClose

DirectivePrimaryv0.1.0WCAG AA

projects/common/dialog/dialog/dialog-close.directive.ts

Import#

import { CngxDialogClose } from '@cngx/common/dialog'

Description#

Close trigger for a dialog. Place on any clickable element inside a dialog.

With a value: [cngxDialogClose]="'confirm'" calls dialogRef.close(value)
Without a value: cngxDialogClose calls dialogRef.dismiss()

Automatically sets type="button" on <button> hosts to prevent accidental form submission. Sets a default aria-label="Close dialog" when the host has no descriptive text content (icon-only buttons).

<dialog cngxDialog>
  <button [cngxDialogClose]="false">Cancel</button>
  <button [cngxDialogClose]="true">Confirm</button>
</dialog>

Metadata#

Selector: [cngxDialogClose]
Export as: cngxDialogClose

Host#

Static attributes: [attr.type]hostType
[attr.aria-label]ariaLabel()
Listeners: click → handleClick

Index#

Inputs#

label#string | undefined

input()

Explicit aria-label override.

When not set, the directive auto-detects whether the host element has descriptive text content. If it does (e.g. "Cancel", "Confirm"), no aria-label is added. If the content is a single character, empty, or visually an icon, aria-label defaults to "Close dialog".

default undefined, { alias: 'cngxDialogCloseLabel' }

value#unknown

input()

Value to pass to close(). When undefined, calls dismiss() instead.

default undefined, { alias: 'cngxDialogClose' }

Instance Properties#

hostType#unknown

ProtectedReadonly

Set type="button" on

(this.elRef.nativeElement as HTMLElement).tagName === 'BUTTON' ? 'button' : null

Methods#

handleClick#void

Protected

HostBindings#

Binding	Expression
`[attr.type]`	`hostType`
`[attr.aria-label]`	`ariaLabel()`

HostListeners#

Event	Handler
`(click)`	`click()`

CngxDialogClose

Import#

Description#

Related#

Metadata#

Host#

Index#

Properties

Methods

Inputs

Derived State

HostBindings

HostListeners

Inputs#

Instance Properties#

Methods#

HostBindings#

HostListeners#