@anguless/angulux/badge

badge

2 declarations3 demos

import

import { BadgeModule } from '@anguless/angulux/badge';

Basic

The content of a badge is set with the value property.

<agl-badge value="2" />

Severity

Severity defines the colour of the badge.

<agl-badge value="2" /><agl-badge value="4" severity="secondary" /><agl-badge value="6" severity="success" /><agl-badge value="8" severity="info" /><agl-badge value="9" severity="warn" /><agl-badge value="3" severity="danger" /><agl-badge value="5" severity="contrast" />

Directive

aglBadge attaches a badge to any element, which is how it is put on a button, a toggle button or an icon.

Alerts

<agl-button label="Emails" aglBadge value="8" severity="secondary" /><agl-toggleButton [(ngModel)]="muted" onLabel="Muted" offLabel="Alerts" aglBadge value="3" severity="danger" /><i class="pi pi-bell" aglBadge value="2" style="font-size: 1.5rem"></i>

API

Generated from the committed corpus, which check:corpus holds to the built library.

BadgeDirective

directive[aglBadge]

Badge Directive is directive usage of badge component.

Input	Type	Default	Description
ptBadgeDirective deprecated — use pBadgePT instead.	BadgePassThrough \| undefined	undefined	Used to pass attributes to DOM elements inside the Badge component.
pBadgePT	BadgePassThrough \| undefined	undefined	Used to pass attributes to DOM elements inside the Badge component.
pBadgeUnstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
badgeDisabled property disabled	boolean	not documented	When specified, disables the component.
badgeSize	'large' \| 'xlarge' \| 'small' \| null \| undefined	not documented	Size of the badge, valid options are "large" and "xlarge".
size deprecated — use badgeSize instead.		not documented	Size of the badge, valid options are "large" and "xlarge".
severity	'secondary' \| 'info' \| 'success' \| 'warn' \| 'danger' \| 'contrast' \| null \| undefined	not documented	Severity type of the badge.
value	string \| number	not documented	Value to display inside the badge.
badgeStyle	{ [klass: string]: any } \| null \| undefined	not documented	Inline style of the element.
badgeStyleClass	string	not documented	Class of the element.

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.

Badge

componentagl-badge

Badge is a small status indicator for another element.

Input	Type	Default	Description
styleClass deprecated — since v20.0.0, use `class` instead.	string	not documented	Class of the element.
badgeSize	'small' \| 'large' \| 'xlarge' \| null	not documented	Size of the badge, valid options are "large" and "xlarge".
size	'small' \| 'large' \| 'xlarge' \| null	not documented	Size of the badge, valid options are "large" and "xlarge".
severity	'secondary' \| 'info' \| 'success' \| 'warn' \| 'danger' \| 'contrast' \| null	not documented	Severity type of the badge.
value	string \| number \| null	not documented	Value to display inside the badge.
badgeDisabled	boolean	not documented	When specified, disables the component.

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.