# i18n Standards — GB4.7MFE

Last analyzed: 2026-02-23

---

## Current Setup
- **Active library:** `@jsverse/transloco` v7.6.1 (use this)
- **Legacy (remove):** `@ngx-translate/core` v16.0.4 — adds bundle weight, no benefit
- **Config file:** `transloco.config.ts`
- **Translation files:** `projects/public/i18n/` (en, ta, hi, fr, ar, zh, es)
- **Loader:** HTTP-based translation loader

---

## Known Hardcoded English Strings (not translated)

| File | Line | Content |
|------|------|---------|
| `projects/recruitment/transaction/recruitment/applicant/applicant.component.ts` | 265-271 | Step descriptions: 'Basic contact details', 'Family and physical information', etc. |
| `projects/recruitment/dashboard/applicantdashboard/applicantdashboard.component.ts` | 70-91 | statusOptions labels: 'All Status', 'Active', 'Inactive' |
| `features/gbshow/components/gbshowlist/gbshowlist.component.ts` | 188-196 | statusMap: {0: 'Pending', 1: 'Active', 2: 'Deleted'} |
| `features/login/login.component.ts` | 118-119 | 'Time must be in HH:MM format', 'Invalid Time Format' |
| `projects/recruitment/transaction/recruitment/applicant/applicant.component.ts` | 282,300,325,391 | 'Age Validation Failed', 'Required Field Missing' |
| `projects/recruitment/dashboard/applicantdashboard/applicantdashboard.component.ts` | 302-311 | '1 year', 'years', 'LPA' (currency/plural) |

---

## Missing Transloco Configuration
Add to `transloco.config.ts`:
```typescript
{
  defaultLang: 'en',
  fallbackLang: 'en',
  missingHandler: {
    useFallbackTranslation: true,
    logMissingKey: true,   // log in dev, silent in prod
  }
}
```
Without fallback: missing keys render as raw key strings in production.

---

## No RTL Support
- Arabic (`ar`) is a supported language but ZERO RTL CSS exists
- No `[dir="rtl"]` selectors, no Angular CDK Directionality usage
- Fix required before Arabic can be used in production:
  ```typescript
  // In root component or layout:
  constructor(private dir: Directionality) {
    effect(() => {
      document.documentElement.dir = currentLang === 'ar' ? 'rtl' : 'ltr';
    });
  }
  ```
  ```scss
  // In component SCSS:
  :host-context([dir="rtl"]) {
    flex-direction: row-reverse;
    text-align: right;
    margin-left: 0; margin-right: 16px;
  }
  ```

---

## No Locale-Aware Formatting
- `applicantdashboard.component.ts:302` — `exp === 1 ? '1 year' : '${exp} years'` (English plural hardcoded)
- `'LPA'` currency label hardcoded
- No Angular `DatePipe` with locale, no `CurrencyPipe` with locale
- Fix plurals with Transloco ICU or `I18nPluralPipe`:
  ```typescript
  // translation key:
  "experience": "{ count, plural, =1 {1 year} other {# years} }"
  ```

---

## Rules for New Modules

1. **NEVER put display strings in TypeScript/HTML directly** — use translation keys
2. **Translation key convention:** `module.section.key` (e.g., `recruitment.status.active`)
3. **Use `TranslocoService.translate()` in TS code** for dynamic strings (labels, toasts, validation)
4. **Use `transloco` pipe in templates:** `{{ 'key' | transloco }}`
5. **Use `I18nPluralPipe` or Transloco ICU** for pluralization — never string concatenation
6. **Use `CurrencyPipe` with locale, `DatePipe` with locale** — never format manually
7. **Never use `@ngx-translate`** — use Transloco only
8. **Add RTL styles** for any new layout component using `[dir="rtl"]` selectors
9. **Add new translation keys to ALL language files** when adding new UI strings