@talenra/components documentation
  1. Components
  2. BadgeComponent

File

badge/src/badge/badge.component.ts

Description

Badges are small status descriptors for UI elements. A badge consists of a small circle, containing a number, that appears in proximity to another object.

If you're looking to add a Badge to an Icon or Button component, check the Overlay Badge component.

Example :
<talenra-badge counter="45" />

Import

Example :
import { BadgeComponent } from '@talenra/components/badge';

See OverlayBadgeComponent

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector talenra-badge
imports CounterPipe
styleUrls ./badge.component.scss
templateUrl ./badge.component.html

Index

Inputs

Inputs

counter
Required :  true
Default value : { transform: numberAttribute }

The actual counter value
maxVal
Default value : 99

The maximum value to display. If the actual value is greater than the max value, the max value will be displayed followed by a plus sign.

Example :
// Component class
protected myValue = 12;
Example :
<!-- Component template -->
<talenra-badge [counter]="myValue" maxVal="9" />

results matching ""

    No results matching ""