Internationalization with Angular 4

Viewed 2487

I need to Add multiple language support for my Angular 4 Application.I need to know the best approach to achieve this.

4 Answers

You can do also a simple thing by making various files such as en.json etc. consisting of various lables such as

en.json

{

 lbl_name1: "Lable Name 1",
 lbl_name2: "Lable Name 2"

}

Now do a thing write a mechanism which will read the file,for Angular 6 we can use http client in an your abc.ts file & put the data into a session storage

    public languageVar: any = [];
    //Http Client can be used and you can pass the file name at runtime also, I have 
    passed it statically

    this.httpClientObj.get(en.json).suscribe({
    data=> {
           //setting into session for further use into app
           window.localstorage.setItem('langLables',JSON.stringify(data));

           //setting into the variable declared above
           this.languageVar = JSON.parse(window.getItem('langLables'));
       },
    error=>{
           alert("File not found"); 
      }
    }
);

Now suppose you have an html file, abc.html, by using one-way binding

<h1>{{languageVar.lbl_name1}}</h1>
<p>{{languageVar.lbl_name2}}</p>
Related