ng-trans

transApp

@ng-trans [

The internationalization (i18n) compiler for Angular.

Simple example using ng-trans: https://stackblitz.com/github/ngx-translate/example

Get the complete changelog here: https://www.npmjs.com/package/ng-trans

Table of Contents

• Installation
• Usage
  • Build node server
  • Create html and ts files
  • Run
  • CLI

Installation

First you need to install the npm module:

npm i ng-trans --save

Usage

1. Build node server :

You should create simple server trans-server.js file in angular project root or any project using the following options

Option	Usage	Required
src	the source files path	required
dest	if you need translate output in other directory not in same files (not src)	optional
prefix	if have multiple projects	optional
transPath	trans json files path	required
compName	if you need to trans single component	optional
ext	file extensions like ['js', 'ts']	optional

after using npm i ng-trans --save to install package create the simple file

var trans = require('ng-trans');  
trans({  
  src: 'src/app',  
  transPath: 'src/assets/trans'  
});

2. Create HTML and TS files :

Now you should customize your component files like as the following example

<p>{{'%WelcomePage.HelloWorld.{"en":"Hello World","fr":"Bonjour le monde"}%@trans' | translate}}</p>

Notes: 1- the line should start with % and end with %@trans 2- important: the translate line should ended with object with translated types for example en and fr or en and ar and you make sure add . in between object and last key in translate levels .{"en":""} . 3- you can use multiple levels levelOne.LevelTwo.LevelThree. ....... 4- you can write object keys camel case welcomePage or upper letter WELCOME_PAGE or welcome_page or any typing ways and output will be WELCOME_PAGE. 5. you can add trans value in en as same as last key in object WelcomePage.HelloWorld.{"en":"HelloWorld"} and compiler will rewrite it as human writes Hello wold.

import {Component} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';

@Component({
    selector: 'app',
   .....
})
export class AppComponent {
    validation = {isRequeried: '%welcomePAge.validation{"en":"%this field is required%@trans","fr":"Ce champ est requis"'};

    constructor(translate: TranslateService) {
    }
}

3. Run:

When you run node trans-server.js in project root then open project files you will found % %@trans removed and last object also.

import {Component} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';

@Component({
    selector: 'app',
   .....
})
export class AppComponent {
    validation = {isRequeried: 'WELCOME_PAGE.VALIDATION';

    constructor(translate: TranslateService) {
    }
}

and HTML

<p>{{'WELCOME_PAGE.HELLO_WORLD' | translate}}</p>

and you can find new files in translate files path en.json and fr.json and map

{
	WELCOME_PAGE:{
		HELLO_WORLD:"Hello World",
		VALIDATION:"this field is required"
		
	}
}

If you need add more translate item do it without write old items or if you need update old one you need only set it in trans mode % .... %@trans and it will overwrite in translated files.

3. Cli:

Also you can use commend lines to build translate files without install it in project package use the following commend to download project in your workspace:

git clone https://gitlab.com/ahmedharby9/transapp.git

after download project copy your source files in src in project and create trans directory and then run commend line node app.js src 'src' transPath 'trans' you can also use node app.js -h or node app.js --help to know more about options.

Finally, this package used to reducing translation time during development work and providing you with the ideal solution in creating an integrated translation in many languages in the simplest way.