CngxSuffix

DirectivePrimaryv0.2.0WCAG AA

projects/forms/field/suffix.directive.ts

Import#

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

Description#

Typed suffix affix for a form-field control - a positioned add-on rendered after the input (unit, currency code, inline icon, or an interactive control like an in-field clear button).

Mirror of CngxPrefix for the trailing side. Place it on the affix element inside the input row you compose; a decorative affix (the default) is aria-hidden, and cngxSuffixInteractive keeps an interactive affix (button, link) in the a11y tree and focus order. Layout stays yours; the directive contributes the cngx-field-suffix styling-hook class only.

<span cngxAffixRow>
  <input cngxInput cngxNumericInput [field]="f.weight" />
  <span cngxSuffix>kg</span>
</span>

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

Metadata#

Selector: [cngxSuffix]
Export as: cngxSuffix

Host#

Class: cngx-field-suffix
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: 'cngxSuffixInteractive', transform: booleanAttribute, }

HostBindings#

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