GdLimitNumberPipe

The GdLimitNumberPipe is an Angular pipe that limits the display of a number to a specified maximum value, appending a suffix when the number exceeds this limit.

Import

import { GdLimitNumberPipe } from '@geodome/gdk/common';

Usage

{{ someNumber | limitNumber:100 }}

or with a custom suffix:

{{ someNumber | limitNumber:100:'++' }}

Parameters

• value: The number to be limited.
• maxValue: The maximum value to display before applying the suffix.
• suffix (optional): The string to append when the value exceeds maxValue. Defaults to '+'.

Behavior

• If the input value is greater than maxValue, it returns maxValue followed by the suffix.
• If value is less than or equal to maxValue, it returns value as is.
• If either value or maxValue is not a valid number, it returns the original value.

Examples

{{ 75 | limitNumber:100 }} // Output: 75
{{ 150 | limitNumber:100 }} // Output: 100+
{{ 200 | limitNumber:100:'++' }} // Output: 100++

Use Cases

• Displaying follower counts on social media (e.g., "999+")
• Showing item counts in lists or inventories
• Limiting displayed numerical values in UI elements

note

This pipe is particularly useful for creating clean and consistent number displays in user interfaces, especially when dealing with potentially large numbers.