CngxRequired

ComponentPrimaryOnPushNo encapsulationv0.1.0WCAG AA

projects/forms/field/required.component.ts

Import#

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

Description#

Auto-showing required indicator inside a cngx-form-field.

Renders the marker only when the field's required() signal is true. Sets aria-hidden="true" so screen readers ignore the visual marker - the input already communicates required state via aria-required.

Supports a custom template for rendering icons, tooltips, or styled badges.

Text marker (default)

<label cngxLabel>E-Mail <cngx-required /></label>

Custom marker text

<label cngxLabel>E-Mail <cngx-required marker="(required)" /></label>

Custom template (icon)

<label cngxLabel>
  E-Mail
  <cngx-required>
    <ng-template>
      <svg width="8" height="8" viewBox="0 0 8 8"><circle cx="4" cy="4" r="4" fill="currentColor"/></svg>
    </ng-template>
  </cngx-required>
</label>

https://cngxjs.github.io/cngx/examples/#/forms/field/required/basic https://cngxjs.github.io/cngx/examples/#/forms/field/required/custom-template https://cngxjs.github.io/cngx/examples/#/forms/field/required/auto-hide-on-non-required https://cngxjs.github.io/cngx/examples/#/forms/field/required/placement-conventions

Metadata#

Selector: cngx-required
Export as: cngxRequired
Change detection: ChangeDetectionStrategy.OnPush
Encapsulation: ViewEncapsulation.None
Style URLs: ./required.component.css
Imports: NgTemplateOutlet

Host#

Class: cngx-required
Static attributes: aria-hiddentrue

Relationships

Depends on1

NgTemplateOutletdependency

Index#

Properties

customTpl

Inputs

marker

Inputs#

marker#

input()

The visual marker text. Defaults to *. Ignored when a custom template is provided.

default '*'

Instance Properties#

customTpl#unknown

ProtectedReadonly

Optional custom template. Replaces the text marker when provided.

contentChild<TemplateRef<CngxRequiredContext>>(TemplateRef)

Default visuals for CngxRequired - the required marker rendered as a standalone atom. The host carries .cngx-required and stays inline so the marker sits next to the label text; the inner <span> carries the glyph color.

Slots

.cngx-required - host element, kept display: inline with a 0.125em inline-start margin (display: contents would push the inner span into the label's parent and land the asterisk on its own row in stacked-field grids)
inner <span> - the glyph itself, colored from the danger chain

Inheritance

The required-marker token is shared with CngxLabel; redeclared here so consumers can use <cngx-required> without also using [cngxLabel]:

--cngx-field-required-color -> --cngx-field-error-color -> --cngx-color-danger

A :root delegating rule pins the token to --cngx-color-danger so a dark-mode swap on the foundation token cascades through.

State / Required

--cngx-field-required-color#<color>

Default value oklch(0.55 0.21 27)

Color of the required-marker glyph. Falls back through --cngx-field-error-color and then --cngx-color-danger.

See: [[--cngx-color-danger]]