# ngx-compact-number

> Display [big] numbers in [metric notation](https://en.wikipedia.org/wiki/Metric_prefix) (1.2k, 12M...) to gain some space:

Latest version **0.0.5** (published 2018-12-03) · 0 weekly downloads

## Install

```sh
npm install ngx-compact-number
pnpm add ngx-compact-number
yarn add ngx-compact-number
bun add ngx-compact-number
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2018-12-03 |
| First published | 2018-06-01 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 52.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Aurélien Hervé |
| Maintainers | aherve |

## Links

- npm: https://www.npmjs.com/package/ngx-compact-number
- Repository: https://github.com/aherve/ngx-compact-number
- Issues: https://github.com/aherve/ngx-compact-number/issues
- npm.io page: https://npm.io/package/ngx-compact-number

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Recent versions

- 0.0.5 (latest) — 2018-12-03
- 0.0.4 — 2018-06-02
- 0.0.3 — 2018-06-02
- 0.0.2 — 2018-06-02
- 0.0.1 — 2018-06-01

## README

# ngx-compact-number [ ![Codeship Status for aherve/ngx-compact-number](https://app.codeship.com/projects/5cc2c320-47d9-0136-2ccc-028351a347c0/status?branch=master)](https://app.codeship.com/projects/292340)

Display [big] numbers in [metric notation](https://en.wikipedia.org/wiki/Metric_prefix) (1.2k, 12M...) to gain some space:

`{{ 12000 | compactNumber }}  =>  '12k'` (see [more examples](#examples))

## Installation

### 1. Install with yarn or npm:

 - npm: `npm i ngx-compact-number`
 - yarn: `yarn add ngx-compact-number`

### 2. Add `NgxCompactNumberModule` to your `app.module.ts` file:

```app.module.ts
...
import { NgxCompactNumberModule } from 'ngx-compact-number'
...

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    NgxCompactNumberModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

```

## Usage

### Using the Pipe

Simply use `compactNumber` as a pipe for your number, _e.g._ `{{ 123456 | compactNumber }}` will print `123k`
You can also set a number of decimals as 2nd optional parameter, so that `{{ 123456 | compactNumber:1 }}` becomes `123.4k`
You can also pass a locale variable as third argument, which is passed to @angular's `DecimalPipe` pipe.

### Service

A service is available to format numbers in the same way:

```myComponent.ts
...
import { NgxCompactNumberService } from 'ngx-compact-number'
...
export class AppComponent {

  constructor(private compactNumberService: NgxCompactNumberService) {}
  ...
  
  public formatted = this.compactNumberService.format(123458, 2) // =>  '123,46k'
}

```

## Examples

![demo as image](./src/assets/example.png)

---
_Source: https://npm.io/package/ngx-compact-number · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._