Skip to main content
cngx-src documentation

CngxBadge

DirectivePrimaryv0.1.0WCAG AA

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

GitHub

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

Related#

Metadata#

Selector
[cngxBadge]
Export as
cngxBadge

Host#

Bound classes
cngx-badge-host ← true

Index#

Inputs

cngxBadgecolorhiddenmaxposition

Derived State

displayValueisDotModeisEmpty

HostBindings

class.cngx-badge-host

Inputs#

cngxBadge#number | string | boolean
input()Required

Raw value. Numbers show as text (respecting max); booleans flip dot mode; strings render verbatim. Numbers at or below 0 count as empty - a negative count never renders, mirroring the 0 behaviour.

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#

BindingExpression
[class.cngx-badge-host]true
Enter to selectArrow Down Arrow Up to navigateEsc to close