user image

Shilpa
Published in : 2022-03-03

How to translate Angular application easily?

Angular

I am using latest ANGULAR 13 version and want to translate all the text written on my landing page to be translated in different languages chosen by readers.

I want support of French, German, and English (UK).

Here is my code sample, 

Library: free translate from NPM

npm i free-translate
const { translate } = require('free-translate');

(async () => {
  const translatedText = await translate('Hello World', { from: 'en', to: 'ja' });
  console.log(translatedText); // こんにちは世界
})();

But this is not much accurate, All translators are not 100% accurate because of grammar and masculine/feminine translations, but if I can achieve at least 95%, I am good with it! 

I have around 780-800 lines on the page. How do I convert the lines automatically or manually and show on base of user's language selection?

 

Comments

Rakshit Date : 2022-03-05

Best answers

34

Best answers

34

I believe ngx-translate library will make your work easy. Online translators are not 100% accurate. I recommend one thing, If you want to convert your text to Spanish, contact someone who speaks spanish, german, french (any of them) or find a freelancer translator to convert your text.  They knows feminine vs masculine version of items.

Add npm package to your project using below command.

npm install @ngx-translate/core @ngx-translate/http-loader rxjs --save

Update your app.module.ts imports with below lines,

// import ngx-translate and the http loader
import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {HttpClient, HttpClientModule} from '@angular/common/http';
@NgModule({
...
imports: [
	...,
		TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            }
        })
]
})

Add below code to your app.component.ts

...
constructor(private translate: TranslateService) {
        translate.setDefaultLang('en');
}

Add below code to Your app.component.html

<div>
    <h1>Translation demo</h1>
    <p>This is a simple demonstration app for ngx-translate</p>
</div>

Add a new file Inside your assets/i18n/en.json

{
  "demo.title": "Translation demo",
  "demo.text": "This is a simple demonstration app for ngx-translate"
}

Update your html markup as given below:

<div>
    <h1>{{ 'demo.title' | translate }}</h1>

    <!-- translation: translation pipe -->
    <p>{{ 'demo.text' | translate }}</p>

    <!-- translation: directive (key as attribute)-->
    <p [translate]="'demo.text'"></p>

    <!-- translation: directive (key as content of element) -->
    <p translate>demo.text</p>
</div>

Your output:

To learn and explore this library more, you can visit here.

Reference: website | github | npm

Shilpa Date : 2022-03-06

Best answers

10

Best answers

10

Such a amazing explanation , I will try it for sure. Thank you.

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

How to reload Angular component without refreshing page?
Publish date: 2022-03-02 | Comments: 1

Tag: Angular

How to calculate distance between two Bluetooth devices?
Publish date: 2022-02-26 | Comments: 1

Tag: Angular

Static code analysis tools integration with latest Angular version
Publish date: 2022-02-25 | Comments: 1

Tag: Angular

How to call event handler onload for Angular application?
Publish date: 2022-03-02 | Comments: 2

Tag: Angular

Rename key inside Object {}
Publish date: 2022-03-05 | Comments: 2

Tag: Angular

Angular: Change columns to rows, and rows to columns while running a *ngFor loop.
Publish date: 2022-03-06 | Comments: 0

Tag: Angular

Angular: HTML anchor tag with #idref issue
Publish date: 2022-03-01 | Comments: 2

Tag: Angular

Angular - PrimeNG charts adding colors for each legends dynamically
Publish date: 2022-02-27 | Comments: 1

Tag: Angular