CngxInputClear

DirectivePrimaryv0.1.0WCAG AA

projects/forms/input/input-clear.directive.ts

Import#

import { CngxInputClear } from '@cngx/forms/input'

Description#

Headless clear behavior for an input or textarea.

Place on a button or any element. Pass a reference to the target input. The consumer renders the UI - this directive only provides the behavior.

<input #nameInput />
<button [cngxInputClear]="nameInput" #clr="cngxInputClear">
  @if (clr.hasValue()) { Clear }
</button>

https://cngxjs.github.io/cngx/examples/#/forms/input/utilities/input-clear

Metadata#

Selector: [cngxInputClear]
Export as: cngxInputClear

Host#

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

Index#

Inputs#

target#HTMLInputElement | HTMLTextAreaElement

input()Required

Reference to the input or textarea element to clear.

default { alias: 'cngxInputClear', }

Outputs#

cleared#void

output()

Emitted after clearing.

Instance Properties#

hasValue#Signal

Readonly

Whether the target has a value.

this.hasValueState.asReadonly()

Methods#

clear#void

Clears the target value, dispatches an input event, and focuses the target.

HostBindings#

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

HostListeners#

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

CngxInputClear

Import#

Description#

Related#

Metadata#

Host#

Index#

Properties

Methods

Inputs

Outputs

Derived State

HostBindings