How to translate Angular application easily?

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 loaderimport {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

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