packages/ecl/components/ecl-animated-numbers/ecl-animated-numers-item/ecl-animated-numbers-item.component.ts
Represents an individual animated number item. Displays a numeric value that animates from 0 to the target when scrolled into view. Uses an IntersectionObserver to trigger animation on viewport visibility and requestAnimationFrame for smooth count-up with cubic ease-out.
Example :<div eclAnimatedNumbersItem
[eclValue]="'1250'"
[category]="'Revenue'"
[prefix]="'€'"
[suffix]="'billions'"
[description]="'Annual revenue growth'">
<ecl-icon eclAnimatedNumbersIcon icon="trend-up" iconSet="phosphor"></ecl-icon>
</div>
| host | { |
| selector | [eclAnimatedNumbersItem] |
| templateUrl | ./ecl-animated-numbers-item.component.html |
Methods |
Inputs |
constructor()
|
| category |
Type : string
|
|
Category label displayed in the item header. |
| description |
Type : string
|
|
Descriptive text displayed below the number. |
| eclValue |
Type : string
|
|
The target numeric value to animate to. Accepts strings with non-numeric characters (they are stripped). |
| prefix |
Type : string
|
|
Text displayed before the animated number (e.g. '€', 'billion'). |
| suffix |
Type : string
|
|
Text displayed after the animated number (e.g. '€', 'billions'). |
| class |
Type : string
|
| e2eAttr |
Type : any
|
| tabindex |
Type : number
|
| getCssClasses | ||||||
getCssClasses(rootClass: string)
|
||||||
|
Parameters :
Returns :
string
|