CngxPrefix

DirectivePrimaryv0.2.0WCAG AA

projects/forms/field/prefix.directive.ts

Import#

import { CngxPrefix } from '@cngx/forms/field'

Description#

Typed prefix affix for a form-field control - a positioned add-on rendered before the input (currency symbol, unit, inline icon, or an interactive control like a search button).

Place it on the affix element inside the input row you compose; the directive owns the affix ARIA so you do not have to. A decorative affix (the default) is aria-hidden so a screen reader is not made to read "dollar sign" before the field's own label; mark it cngxPrefixInteractive when the affix is a real control (button, link) that must stay in the a11y tree and focus order.

Layout stays yours (Komposition statt Konfiguration): position the row with your own flex/grid; the directive contributes the cngx-field-prefix class as a styling hook, not a layout opinion.

<span cngxAffixRow>
  <span cngxPrefix>$</span>
  <input cngxInput cngxNumericInput [field]="f.amount" />
</span>

https://cngxjs.github.io/cngx/examples/#/forms/field/affix/currency-and-unit

Metadata#

Selector: [cngxPrefix]
Export as: cngxPrefix

Host#

Class: cngx-field-prefix
Static attributes: [attr.aria-hidden]interactive() ? null : 'true'
Bound classes: cngx-field-affix--interactive ← interactive

Index#

Inputs

interactive

HostBindings

class.cngx-field-affix--interactive attr.aria-hidden

Inputs#

interactive#

input()

Whether the affix is a real interactive control. Default false (decorative -> aria-hidden). Set it for a button/link affix so it stays in the accessibility tree and focus order.

default false, { alias: 'cngxPrefixInteractive', transform: booleanAttribute, }

HostBindings#

Binding	Expression
`[class.cngx-field-affix--interactive]`	`interactive()`
`[attr.aria-hidden]`	`interactive() ? null : 'true'`