https://github.com/NathanWalker/nativescript-ng2-translate
Use ng2-translate with NativeScript + Angular2.
https://github.com/NathanWalker/nativescript-ng2-translate
Last synced: 12 days ago
JSON representation
Use ng2-translate with NativeScript + Angular2.
- Host: GitHub
- URL: https://github.com/NathanWalker/nativescript-ng2-translate
- Owner: NathanWalker
- License: mit
- Created: 2016-03-09T18:18:34.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2017-01-07T04:31:18.000Z (about 9 years ago)
- Last Synced: 2025-08-01T09:56:22.140Z (7 months ago)
- Language: JavaScript
- Size: 1.67 MB
- Stars: 6
- Watchers: 3
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-nativescript - NG2 Translate - Use ng2-translate with NativeScript + Angular2. (Awesome {N} [](https://github.com/sindresorhus/awesome) / Table of Contents)
README
[](https://github.com/mgechev/angular2-style-guide)
[](http://opensource.org/licenses/MIT)
[](https://david-dm.org/preboot/angular2-library-seed#info=dependencies) [](https://david-dm.org/preboot/angular2-webpack#info=devDependencies)
## NOTE
This plugin is no longer needed to make [ng2-translate](https://github.com/ocombe/ng2-translate) work with NativeScript. Instead you can use it as normal following this as a guide to set it up:
https://github.com/NathanWalker/nativescript-ng2-translate/issues/5#issuecomment-257606661
* [Install](#install)
* [Usage](#usage)
* [Why the `TNS` prefixed name?](#why-the-tns-prefixed-name)
* [Accolades](#accolades)
## Install
```
npm install nativescript-ng2-translate --save
```
## Usage
#### 1. Add locale translation files
You can create these anywhere in your app but let's say you create an `assets` folder and in that an `i18n` folder so:
* `app/assets/i18n` folder
Then in there, create translation files, for example:
* `en.json` (English):
```
{
"HOME": "Home"
}
```
* `es.json` (Spanish):
```
{
"HOME": "Casa"
}
```
#### 2. Setup NativeScript/Angular
* `app.ts`:
```
import {nativeScriptBootstrap} from 'nativescript-angular/application';
// angular
import {Component, provide} from 'angular2/core';
import {HTTP_PROVIDERS} from 'angular2/http';
// libs
import {TranslateLoader, TranslateService, TranslatePipe} from 'ng2-translate/ng2-translate';
import {TNSTranslateLoader} from 'nativescript-ng2-translate/nativescript-ng2-translate';
@Component({
selector: 'app',
template: `
`,
pipes: [TranslatePipe]
})
class TestComponent {}
nativeScriptBootstrap(TestComponent, [
HTTP_PROVIDERS,
provide(TranslateLoader, {
useFactory: () => {
// pass in the path to your locale files
return new TNSTranslateLoader('assets/i18n');
}
}),
TranslateService
]);
```
## Why the TNS prefixed name?
`TNS` stands for **T**elerik **N**ative**S**cript
iOS uses classes prefixed with `NS` (stemming from the [NeXTSTEP](https://en.wikipedia.org/wiki/NeXTSTEP) days of old):
https://developer.apple.com/library/mac/documentation/Cocoa/Reference/Foundation/Classes/NSString_Class/
To avoid confusion with iOS native classes, `TNS` is used instead.
## Accolades
* Project using this library [angular2-seed-advanced](https://github.com/NathanWalker/angular2-seed-advanced)
* [Olivier Combe's ng2-translate library](https://github.com/ocombe/ng2-translate)
## Tutorials
Need more help getting started? Check out these Angular Translate tutorials for NativeScript Android and iOS applications.
* [Angular Translate in a NativeScript Angular Application](https://www.thepolyglotdeveloper.com/2017/01/internationalization-nativescript-mobile-app-angular/)
# License
[MIT](/LICENSE)