@kopynator/angular

Angular wrapper for the Kopynator i18n platform. Works with Angular 17+ (Signals support).

Features

• Signal-based: Reacts to locale changes and loading states using Angular Signals.
• Pipe & Directive: Use {{ 'key' | kopy }} or <span [kopy]="'key'"></span>.
• Impure Pipe: Automatically updates when translations are loaded or changed.

Installation

npm install @kopynator/core @kopynator/angular

Usage

1. Configuration

In your app.config.ts:

import { provideKopynator } from '@kopynator/angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideKopynator({
      apiKey: 'YOUR_API_KEY', // Get it from https://www.kopynator.com
      defaultLocale: 'en',
      mode: 'live',
      languages: ['es', 'en']
    })
  ]
};

Configuration Options

| Option | Type | Description | |---|---|---| | apiKey | string | Required. Your public project token found at kopynator.com. | | defaultLocale | string | Required. The fallback language if no other is detected (e.g. 'en'). | | languages | string[] | Required for 'local' mode. Array of supported language codes. | | mode | 'local' \| 'hybrid' \| 'live' | Determines how translations are loaded. See below. |

Loading Modes

1. local:

   • Offline First. Only loads JSON files from your assets/i18n folder.
   • Does not make any network requests to Kopynator API.
   • Ideal for development without internet or strict offline requirements.

2. live:

   • Cloud First. Fetches the latest translations directly from the Kopynator CDN/API.
   • Ensures users always see the most up-to-date content without deploying a new version of your app.
   • Requires internet connection.

3. hybrid (Recommended):

   • Best of Both Worlds. First loads your local JSON files (instant render), then fetches updates from the Cloud in the background.
   • Merges both sources, giving priority to the Cloud for any new or updated keys.

2. In Templates

<!-- Using Pipe -->
<h1>{{ 'welcome_title' | kopy }}</h1>

<!-- Using Directive -->
<p [kopy]="'description'" [kopyParams]="{ name: 'Carlos' }"></p>

<!-- Using Service -->
<button (click)="kopyService.setLocale('es')">Español</button>