CngxCharCount
projects/forms/input/char-count.component.ts
Import#
import { CngxCharCount } from '@cngx/forms/input'
Description#
Live character counter for text inputs inside a cngx-form-field.
Listens to DOM input events on the sibling input element for reliable,
framework-agnostic value tracking. Falls back to reading from the
FieldState value signal if no DOM input is found.
Pass [max] / [min] explicitly or let the component read them from
the presenter's constraint metadata.
Basic (auto-wired)
<cngx-form-field [field]="bioField">
<textarea cngxInput [formField]="bioField"></textarea>
<cngx-char-count [max]="140" />
</cngx-form-field>Custom template
<cngx-char-count [max]="140">
<ng-template let-current="current" let-remaining="remaining" let-over="over">
{{ remaining }} characters remaining
</ng-template>
</cngx-char-count>Metadata#
Host#
Relationships
Depends on1
Index#
Properties
Derived State
HostBindings
Inputs#
Instance Properties#
unknownOptional custom template.
contentChild<TemplateRef<CngxCharCountContext>>(TemplateRef)HostBindings#
| Binding | Expression |
|---|---|
[class.cngx-char-count--over] | isOver() |
Default visuals for CngxCharCount - counter atom rendered under a
text input or textarea. The host carries .cngx-char-count and
stays display: contents so the counter has no visual footprint of
its own; font-size and color flow to descendants through the
cascade.
State modifiers
--over- text color switches to the danger chain once the count exceeds the limit
Slots
.cngx-char-count- host, sets resting font-size + color from the hint / typography chain
Inheritance
Typography and surface tokens delegate to the foundation:
--cngx-field-char-count-font-size->--cngx-font-size-sm--cngx-field-char-count-color->--cngx-field-hint-color--cngx-field-char-count-over-color->--cngx-field-error-color->--cngx-color-danger
A :root delegating rule pins
--cngx-field-char-count-over-color to --cngx-color-danger so a
dark-mode swap on the foundation token cascades through.
Dark mode
Three hooks lift the muted resting color from dim dark gray to soft light gray so the counter keeps its secondary-information weight on the dark surface:
prefers-color-scheme: dark[data-color-scheme="dark"].darkclass
Index#
Typography
State / Over
Typography
*0.75remFont-size of the counter text. Falls back through
--cngx-font-size-sm. syntax: '*' because @property's
<length> initial-value forbids rem.
Surface
<color>oklch(0.45 0 0)Text color while under the limit. Falls back through
--cngx-field-hint-color.
State / Over
<color>oklch(0.55 0.21 27)Text color once the count exceeds the limit. Falls back through
--cngx-field-error-color and then --cngx-color-danger.
See: [[--cngx-color-danger]]