{"id":21822031,"url":"https://github.com/tflori/angular-translator","last_synced_at":"2025-04-14T03:51:53.767Z","repository":{"id":19762388,"uuid":"75800220","full_name":"tflori/angular-translator","owner":"tflori","description":"translation module for angular","archived":false,"fork":false,"pushed_at":"2023-05-23T23:27:41.000Z","size":1714,"stargazers_count":21,"open_issues_count":6,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-12T20:18:52.044Z","etag":null,"topics":["angular","angular2","angular2-translator","dynamic-translations","i18n","interpolation","translation"],"latest_commit_sha":null,"homepage":"https://tflori.github.io/angular-translator/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tflori.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-12-07T04:46:44.000Z","updated_at":"2023-08-13T16:33:26.000Z","dependencies_parsed_at":"2024-06-19T17:39:46.918Z","dependency_job_id":"cc97bc3f-be5d-463b-bea7-4ef652371eea","html_url":"https://github.com/tflori/angular-translator","commit_stats":{"total_commits":283,"total_committers":8,"mean_commits":35.375,"dds":0.3250883392226148,"last_synced_commit":"e1a8abcf0d4fc52904b53c9fe2da34af3829a154"},"previous_names":["tflori/angular2-translator"],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tflori%2Fangular-translator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tflori%2Fangular-translator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tflori%2Fangular-translator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tflori%2Fangular-translator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tflori","download_url":"https://codeload.github.com/tflori/angular-translator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248625564,"owners_count":21135518,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular2","angular2-translator","dynamic-translations","i18n","interpolation","translation"],"created_at":"2024-11-27T17:12:29.634Z","updated_at":"2025-04-14T03:51:53.747Z","avatar_url":"https://github.com/tflori.png","language":"TypeScript","readme":"# Angular Translator\n\n[![Build Status](https://travis-ci.org/tflori/angular-translator.svg?branch=master)](https://travis-ci.org/tflori/angular-translator)\n[![Coverage Status](https://coveralls.io/repos/github/tflori/angular-translator/badge.svg?branch=master)](https://coveralls.io/github/tflori/angular-translator?branch=master)\n[![npm version](https://badge.fury.io/js/angular-translator.svg)](https://badge.fury.io/js/angular-translator)\n\n`angular-translator` is a simple translation service for angular applications. It should support all necessary\nfeatures for translation. Like interpolation, references to other translations, modules and loaders.\n\n## Features\n\n### Interpolation\n\nIt supports interpolation so you can:\n * output variables in your translations  \n * calculate in your translations  \n * pluralize in your translations  \n * execute functions in your translations\n\n```json\n{\n  \"HELLO\":      \"Hello {{ name }}!\",\n  \"ANSWER\":     \"The answer is {{ 7 * 6 }}\",\n  \"MESSAGES\":   \"You have {{ count }} new message{{ count != 1 ? 's' : '' }}\",\n  \"LAST_LOGIN\": \"Your last login was on {{ lastLogin.format('MM/DD/YYYY') }}\"\n}\n```\n\n[* dynamic translations](https://tflori.github.io/angular-translator/dynamize.html)\n  \n### Refer to other translations\n\nBy referring to other translations you can make it easy to have everywhere the same text without copy and paste.\n\n```json\n{\n  \"GREETING\":      \"Hello {{ name }}!\",\n  \"REGISTERED\":    \"[[ GREETING : name ]] Thanks for registering at this service.\",\n  \"LOGIN_CONFIRM\": \"[[ GREETING : name ]] Your last login was on {{ lastLogin.format('L') }}.\"\n}\n```\n\n[* dynamic translations](https://tflori.github.io/angular-translator/dynamize.html)\n\n### Use pipes in translations\n\nPure pipes can be used inside translations. This makes formatting easier and localized.\n\n```json\n{\n  \"DISCOUNT\": \"Save {{ original - price | currency:'USD':true }} when you order now!\"\n}\n```\n\n[* dynamic translations](https://tflori.github.io/angular-translator/dynamize.html)\n\n### Modules\n\nYour translations can be divided to multiple modules. Each module can have a different configuration. This way you have\nmore control over the size of translation files and are able to provide some modules in more or less languages.\n\n[* Modules](https://tflori.github.io/angular-translator/modules.html)\n\n### Different loaders\n\nThis module supports different loaders. It is shipped with a basic JSON loader (next paragraph). You can create own \nand static loaders. It is also possible to use different loader strategies for each module.\n\n[* TranslationLoader](https://tflori.github.io/angular-translator/TranslationLoader.html)\n\n#### JSON loader\n\nIt is a basic loader that loads the translation for a specific language and module from your JSON file. A translation\ncan be an array to allow multi line translations (to make the files readable and better structured).\n\n[* TranslationLoaderJson](https://tflori.github.io/angular-translator/TranslationLoaderJson.html)\n\n## How to use\n\nSimple basic usage:\n\n```ts\nimport { Component } from \"angular2/core\";\nimport { Translator } from \"angular-translator\";\n\n@Component({\n    selector: \"my-app\",\n    template: \"{{ TEXT | translate }} is the same as \u003cspan translate=\\\"TEXT\\\"\u003e\u003c/span\u003e\"\n})\nexport class AppComponent {\n    constructor(translator: Translator) {\n        translator.translate(\"TEXT\").then(\n          (translation) =\u003e console.log(translation)\n        );\n    }\n}\n```\n\nTo learn more have a look at [the documentation](https://tflori.github.io/angular-translator/).\n\n## How to upgrade from angular2-translator\n\n### 1. Upgrade the package\n\nRemove angular2-translator and install angular-translator.\n  \n```bash\nnpm remove angular2-translator --save\nnpm install angular-translator --save\n```\n\n### 2. Update your setup\n\nAngular translator now gives a simple-to-use static method for setup. This function also creates all required providers.\nThe usage is as follows.\n\n```ts\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { HttpModule } from '@angular/http';\n\nimport { TranslatorModule } from 'angular-translator';\n\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    FormsModule,\n    HttpModule,\n    TranslatorModule.forRoot({\n      providedLanguages: ['de', 'en', 'ru'],\n      defaultLanguage: 'de'\n    })\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n### 3. Change the implementation from TranslateService to Translator  \n\nThe `TranslateService` has been renamed to `Translator`. It has the same methods and can therefore be exchanged:\n\n```ts\nimport { Component } from '@angular/core';\n\nimport { TranslateService } from 'angular2-translator'; // before\nimport { Translator } from 'angular-translator'; // now\n\n@Component()\nexport class ComponentBefore {\n  constructor(translateService: TranslateService) {\n    translateService.translate('TEXT').then((translation) =\u003e this.text = translation);\n  }\n}\n\n@Component()\nexport class ComponentNow {\n  constructor(translator: Translator) {\n    translator.translate('TEXT').then((translation) =\u003e this.text = translation);\n  }\n}\n```\n\n\u003e You can do this by search and replace on your own risk.\n\n### 4. Change the implementation for changing the language\n\nThe `Translator` has a public property `language` and you can use it as before with `TranslateService`. There is a new\nservice called `TranslatorContainer` that holds all `Translator`s for different modules. When you want to change the\nlanguage for every module you may want to change `TranslatorContainer.language` instead. The change will be forwarded to\nevery `Translator`.\n\n### 5. Other questions\n\n\u003e I used the `languageChanged` observable to update translations inside services and components. Do I need to change\nhere something?  \n\nNo, the `Translator` has the same observable that should be used now.\n\n\u003e My configuration seems to be ignored after upgrade.\n\nMay be you copied your previous config. The parameters have changed: defaultLang - defaultLanguage, providedLangs - \nprovidedLanguages, detectLanguageOnStart - detectLanguage.\n\n## How to install\n\n### Get the package\n\nFirst you need to install the package. The easiest way is to install it via npm:\n\n```bash\nnpm install --save angular-translator\n```\n\n## Setup angular module\n\nYou have to set up each `NgModule`  where you want to use the `TranslatorModule` and may be configure it:\n\n```ts\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { TranslatorModule } from \"angular-translator\";\n\nimport { AppComponent } from './app.component';\n\nexport function translateConfigFactory() {\n    return new TranslateConfig();\n}\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    TranslatorModule.forRoot({\n      defaultLanguage: \"de\",\n      providedLanguages: [ \"de\", \"en\" ],\n      detectLanguage: false\n    }),\n  ],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n### Using SystemJs\n\nWhen you are using SystemJs you need to configure where to load angular-translator:\n\n```js\nSystem.config({\n    map: {\n        'angular-translator':       'npm:angular-translator/bundles/angular-translator.js'\n    }\n});\n```\n\n### Manually\n\nYou also can clone the repository and symlink the project folder or what ever:\n\n```bash\ngit clone https://github.com/tflori/angular-translator.git\nln -s angular-translator MyApp/libs/angular-translator\n```\n\n\u003e You should know what you do and don't follow this guide for installation.\n\n## Demo\n\n[This project](https://github.com/tflori/angular-translator-demo) demonstrates how to use angular-translator. The\nproduction version is distributed [here](https://angular-translator-demo.my-first-domain.de/).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftflori%2Fangular-translator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftflori%2Fangular-translator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftflori%2Fangular-translator/lists"}