Internationalization with Angular 4

You can use ngx-translate which is the standard library for internationalization in Angular 2+

You can import the library and create a set of json files which contains the translations and put it inside the assets folder.

Then you can refer it in the HTML. say for example.

en.json has,

"guest.first-name": "first Name",

where first one is the key and second is the value to be displayed . and you can refer in the html as,

  <input  [label]="'guest.first-name' | translate" type="text" name="form_name" [(ngModel)]="firstName" required="required" ></input>

You can use ngx-translate library that I used it and it is very useful for internationalization for Angular.Also I advice you about Angular, you should check jhipster project and then you can learn more advance and detail topics about Angular 4 and Spring Boot.It is very useful project and also you can create Angular and Spring Boot project rapidly...

if you use angular-cli to create newApp it has a good infrastructure for translate, that use ngx-translate. and for translate your text use pipe: translate like:

<span>{{ text | translate }}</span>

translate files exist on the /src/assets/i18n/langCode.json (forEx: en.json). and an initializing require in the main layout constructor

constructor(public translate: TranslateService, zone: NgZone) {
  translate.use('en');
}