CngxBadge

DirectivePrimaryv0.1.0WCAG AA

projects/common/display/badge/badge.directive.ts

Import#

import { CngxBadge } from '@cngx/common/display'

Description#

Generic counter / dot indicator that attaches a small floating element to any host. Purely presentational (aria-hidden="true") - semantic meaning must live on the host (aria-label).

Supports:

Numeric values (capped by max with "N+" fallback)
String values (rendered verbatim)
Boolean true (dot mode, no text)

https://cngxjs.github.io/cngx/examples/#/common/display/badge/colors-and-dot-mode https://cngxjs.github.io/cngx/examples/#/common/display/badge/counts-with-overflow https://cngxjs.github.io/cngx/examples/#/common/display/badge/inline-and-hidden

Metadata#

Selector: [cngxBadge]
Export as: cngxBadge

Host#

Bound classes: cngx-badge-host ← true

Index#

Inputs#

cngxBadge#number | string | boolean

input()Required

Raw value. Numbers show as text (respecting max); booleans flip dot mode; strings render verbatim.

color#CngxBadgeColor

input()

Color variant.

default 'primary'

hidden#boolean

input()

Whether the indicator is hidden regardless of value.

default false

max#number

input()

Cap for numeric values - anything over renders as "{max}+".

default 99

position#CngxBadgePosition

input()

Anchor position relative to the host.

default 'above-end'

HostBindings#

Binding	Expression
`[class.cngx-badge-host]`	`true`

CngxBadge

Import#

Description#

Related#

Metadata#

Host#

Index#

Inputs

Derived State

HostBindings

Inputs#

HostBindings#