Format Number Pipe

Pipe format số theo ngôn ngữ (EN/VI) với hỗ trợ phân cách hàng nghìn, số thập phân và số âm.

Tính năng

• ✅ Format phân cách hàng nghìn (dấu . cho VI, dấu , cho EN)
• ✅ Định dạng số thập phân với số chữ số tùy chỉnh
• ✅ Hỗ trợ số âm với option kiểm soát
• ✅ Chuyển đổi giữa định dạng số có dấu phân cách và số thuần
• ✅ Hỗ trợ truyền ngôn ngữ trực tiếp vào pipe (EN/VI) hoặc tự động detect từ UtilsCache

Cài đặt

npm install @libs-ui/pipes-format-number

Sử dụng

Trong Template

import { LibsUiPipesFormatNumberPipe } from '@libs-ui/pipes-format-number';
import { UtilsLanguageConstants } from '@libs-ui/utils';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [LibsUiPipesFormatNumberPipe],
  template: `
    <!-- Tự động detect ngôn ngữ từ UtilsCache -->
    <p>Số: {{ 1234567 | LibsUiPipesFormatNumberPipe: true : 2 }}</p>
    <!-- Output: 1.234.567 (VI) hoặc 1,234,567 (EN) -->

    <!-- Truyền ngôn ngữ trực tiếp -->
    <p>EN: {{ 1234567 | LibsUiPipesFormatNumberPipe: true : 2 : true : false : 'en' }}</p>
    <!-- Output: 1,234,567 -->

    <p>VI: {{ 1234567 | LibsUiPipesFormatNumberPipe: true : 2 : true : false : 'vi' }}</p>
    <!-- Output: 1.234.567 -->
  `,
})
export class ExampleComponent {
  readonly EN = UtilsLanguageConstants.EN;
  readonly VI = UtilsLanguageConstants.VI;
}

Dùng trong TypeScript

Pipe là thin wrapper của hàm viewDataNumberByLanguage trong @libs-ui/utils. Khi cần gọi trong TypeScript, import và dùng thẳng hàm đó — không cần inject pipe:

import { viewDataNumberByLanguage, UtilsLanguageConstants } from '@libs-ui/utils';

// Tự động detect ngôn ngữ từ UtilsCache
const formatted = viewDataNumberByLanguage(1234567.89, true, 2);
// Output: '1.234.567,89' (VI) hoặc '1,234,567.89' (EN)

// Truyền ngôn ngữ trực tiếp
const formattedEN = viewDataNumberByLanguage(1234567.89, true, 2, true, false, UtilsLanguageConstants.EN);
// Output: '1,234,567.89'

const formattedVI = viewDataNumberByLanguage(1234567.89, true, 2, true, false, UtilsLanguageConstants.VI);
// Output: '1.234.567,89'

Công nghệ sử dụng

| Công nghệ | Mô tả | | -------------- | --------------------------------- | | Angular 18+ | Pipe transform với standalone API | | @libs-ui/utils | viewDataNumberByLanguage utility |

API Reference

Pipe Name

LibsUiPipesFormatNumberPipe

Parameters

| Parameter | Type | Default | Description | | --------------------- | ------------------ | ----------- | ------------------------------------------------------------------------------------ | | value | number \| string | required | Giá trị cần format | | acceptNegativeValue | boolean | required | Cho phép giá trị âm | | parseFixed | number | 1 | Số chữ số thập phân tối đa | | ignoreFormatSeparator | boolean | true | Bỏ qua format separator trong input string | | ignoreParseFloat | boolean | undefined | Không parse float | | lang | string | undefined | Ngôn ngữ format ('en' hoặc 'vi'). Nếu không truyền, tự động detect từ UtilsCache |

Usage Syntax

<!-- Cơ bản - tự động detect ngôn ngữ từ UtilsCache -->
{{ value | LibsUiPipesFormatNumberPipe:acceptNegativeValue }}

<!-- Với parseFixed -->
{{ value | LibsUiPipesFormatNumberPipe:acceptNegativeValue:2 }}

<!-- Đầy đủ parameters -->
{{ value | LibsUiPipesFormatNumberPipe:acceptNegativeValue:2:false:false }}

<!-- Với ngôn ngữ cụ thể -->
{{ value | LibsUiPipesFormatNumberPipe:acceptNegativeValue:2:true:false:'en' }} {{ value | LibsUiPipesFormatNumberPipe:acceptNegativeValue:2:true:false:'vi' }}

Unit Tests

Xem chi tiết tại test-commands.md

# Chạy test cho pipe này
npx nx test pipes-format-number
npx nx test pipes-format-number --no-cache

Demo

• Local: http://localhost:4500/pipes/format-number
• Production: (sau khi deploy)

License

MIT