Skip to main content
cngx-src documentation

CngxAffixRow

DirectivePrimaryv0.2.0WCAG AA

projects/forms/field/affix-row.directive.ts

Import#

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

Description#

Structural row that lays a form control out with its CngxPrefix and CngxSuffix affixes on a single baseline-aligned line - the control grows to fill, the affixes hug their content.

Place it on the wrapper around [cngxPrefix], the control, and [cngxSuffix] so the row layout comes from the library instead of consumer inline flex. The gap is the --cngx-field-affix-gap custom property (default 0.5rem); the rule is structural only, so colours and the outer field stacking stay yours.

The default visuals ship as Track-B CSS in @cngx/themes/cngx.css - import it once at the app root for the row to lay out.

<span cngxAffixRow>
  <span cngxPrefix>CHF</span>
  <input cngxInput cngxNumericInput [field]="f.price" />
  <span cngxSuffix>/ month</span>
</span>

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

Metadata#