npm package: @libs-ui/services-translate
Description: Dịch vụ quản lý đa ngôn ngữ (i18n) cho project, mở rộng từ `@ngx-translate/core` với các tính năng đặc thù:
Latest version: 0.2.356-23

# LibsUiTranslateService

Dịch vụ quản lý đa ngôn ngữ (i18n) cho project, mở rộng từ `@ngx-translate/core` với các tính năng đặc thù:

- **Tích hợp MessageFormat**: Hỗ trợ plural rules, select statements phức tạp.
- **Global Interpolation**: Biến `{value}` dùng chung không cần truyền thủ công.
- **Merge từ source**: Tự động merge chuỗi dịch nội bộ(`data-translation.ts`) khi gọi `use()`.
- **Lưu ngôn ngữ**: Tích hợp `UtilsCache` để lưu lựa chọn ngôn ngữ vào localStorage.

## Cài đặt

```typescript
// app.config.ts
import { getConfigTranslate } from '@libs-ui/services-translate';

export const appConfig: ApplicationConfig = {
  providers: [
    getConfigTranslate(), // Load từ /i18n/*.json
    getConfigTranslate('/assets/translations/'), // Đường dẫn tùy chỉnh
  ],
};
```

## Cấu trúc file ngôn ngữ

Đặt các file JSON tại `public/i18n/` (hoặc đường dẫn tùy chỉnh truyền vào `getConfigTranslate`):

```
public/
└── i18n/
    ├── vi.json
    └── en.json
```

**Ví dụ `vi.json`:**

```json
{
  "i18n_hello": "Xin chào",
  "i18n_greeting": "Xin chào, {name}!",
  "i18n_item_count": "{value} {value,plural, =0 {mục} =1 {mục} other {mục}}"
}
```

## Inject translation từ Object (không cần file .json)

Phù hợp khi muốn đặt translation trực tiếp trong code (ví dụ: cho các key của thư viện dùng chung):

```typescript
import { TranslateService } from '@ngx-translate/core';

constructor() {
  this.translate.setTranslation('vi', {
    i18n_welcome: 'Chào mừng đến với hệ thống',
    i18n_role: 'Vai trò: {role}',
  }, true); // true = merge, không ghi đè keys từ file JSON

  this.translate.setTranslation('en', {
    i18n_welcome: 'Welcome to the system',
    i18n_role: 'Role: {role}',
  }, true);

  this.translate.use('vi');
}
```

## Sử dụng trong Template

```html
<!-- Dùng pipe -->
<span>{{ 'i18n_search' | translate }}</span>

<!-- Có interpolation params -->
<span>{{ 'i18n_greeting' | translate: { name: 'Admin' } }}</span>

<!-- Plural (MessageFormat) -->
<span>{{ 'i18n_item_count' | translate: { value: 5 } }}</span>
```

## Sử dụng trong Component

```typescript
import { TranslateService } from '@ngx-translate/core';

export class MyComponent {
  private translate = inject(TranslateService);

  // Sync
  get label() {
    return this.translate.instant('i18n_search');
  }

  // Async (reactive)
  label$ = this.translate.get('i18n_search');

  // Chuyển ngôn ngữ
  switchLang(lang: string) {
    this.translate.use(lang);
  }
}
```

## Global Interpolation

Dùng để inject biến dùng chung (tên thương hiệu, hotline...) vào **tất cả** chuỗi dịch:

```typescript
import { setInterpolateParamDefault } from '@libs-ui/services-translate';

// Thường đặt ở app.component.ts
setInterpolateParamDefault({
  brand: 'Mobio CRM',
  hotline: '1900 1234',
});
```

Trong file dịch:

```json
{
  "i18n_contact": "Liên hệ {brand} qua hotline {hotline}"
}
```

Kết quả: `"Liên hệ Mobio CRM qua hotline 1900 1234"` — không cần `| translate: { brand: '...', hotline: '...' }`.

## MessageFormat — Plural & Select

```json
{
  "i18n_items": "{value} {value,plural, =0 {mục} =1 {mục} other {mục}}",
  "i18n_status": "Trạng thái: {status,select, active {Hoạt động} inactive {Không hoạt động} other {Không xác định}}"
}
```

## Demo

Xem chi tiết và test interactive tại: [http://localhost:4500/services/translate](http://localhost:4500/services/translate)