Platform: Counter Component Technical Design

Counter

Summary

The counter is used to identify the count of a set of objects.

Example

<fdp-counter count="99" label="Number of apples"></fdp-counter>
<fdp-counter count="99" label="Number of apples" isNotification="true"></fdp-counter>

Property Bindings

count: Number

Number to display.

label: String

Text used for aria-label.

isNotification: Boolean

Toggles whether to display counter in "notification" mode.

Template

<span class="fd-counter"
    [attr.aria-label]="label"
    [ngClass]="{'fd-counter--notification': isNotification}">{{count | counterFormatter }}</span>

counterFormatter is a pipe function which formats thes display of count. Depending on size of number, the display may need to be altered. For example a count of "12,000" may need to be shortend to "999+" or "12k".