NGX-METRIC-PREFIX

Pretify big numbers with metric prefix in modern Angular app

A fast, reliable pipe to format javascript numbers using only few significant digits and a metric prefix.

Demo: https://iresa-org.github.io/ngx-metric-prefix

Table of Contents

• Installation
• Usage
• Contributors

Installation

From your project folder, run ng add @iresa/ngx-metric-prefix

This command will import NgxMetricPrefixModule into your AppModule:

import { NgxMetricPrefixModule } from '@iresa/ngx-metric-prefix';
 
@NgModule({
  ...
  imports: [
    ...
    
    // NgxMetricPrefixModule
    NgxMetricPrefixModule, 
    ...
  ],
  ...
})
export class AppModule {}

Or register NgxMetricPrefixModule to a feature module with following code:

import { NgxMetricPrefixModule } from '@iresa/ngx-metric-prefix';
 
@NgModule({
  ...
  imports: [
    ...
    
    // NgxMetricPrefixModule
    NgxMetricPrefixModule, 
    ...
  ],
  ...
})
export class FeatureModule {}

Usage

<p>{{ 123 | prefix }}</p>
<!-- Display: 123 -->

<p>{{ 1234 | prefix }}</p>
<!-- Display: 1k -->

<p>{{ 12345 | prefix }}</p>
<!-- Display: 12k -->

<p>{{ 123456 | prefix }}</p>
<!-- Display: 123k -->

<p>{{ 1234567 | prefix }}</p>
<!-- Display: 1M -->

<p>{{ 1234567890 | prefix }}</p>
<!-- Display: 1G -->

<p>{{ 1234567890123 | prefix }}</p>
<!-- Display: 1T -->

<p>{{ 1234567890123456 | prefix }}</p>
<!-- Display: 1P -->

<p>{{ 1234567890123456789 | prefix }}</p>
<!-- Display: 1E -->

<p>{{ 1234567890123456789012 | prefix }}</p>
<!-- Display: 1235E -->

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Khoi Bui 💻 🎨 📖 🤔 📆

This project follows the all-contributors specification. Contributions of any kind welcome!

This project uses schematics from @ngneat/lib to generate boilerplate used for open source library.