Angular 13 Language Translations using ngx-translate - Multilingual Angular App
ฝัง
- เผยแพร่เมื่อ 20 ก.ย. 2024
- #Angular13 #i18n #multilangual #tapandubey #NGXTRANSLATE
A simple way of translating to multiple languages using Angular with ngx-translate.
source code-
stackblitz.com...
Hello Tapan,
First of all, thanks for sharing. I'm going to have a question.
I am trying to implement multi-language selection in my project. But the app.component.html is also {{ .... I translate }} I can do the operation. I don't see this method on the subpages and I can't use it.
I can't use this structure in the view file , the html page does not see the traslate service, can you help me with this? I hope I was able to ask.
Sure Thank you for watching, so please correct me if i am wrong here, you are saying that you are not able to add this translation in html and you want to do it with components? If this is your question than yes we can read this value in components as well.
Hi @TapanDubey did you install both /core and /htttploader by running command from a console? Because just by adding those 2 to package file I don't understand how does that work. Not working for me
We need both and then you need to run command npm Install so that will install both packages. You can check this live example and let me know you have any other questions. Thank you for watching.
stackblitz.com/edit/primeng-selectbutton-demo-khmex7?file=package.json
how to create json files for any other languge if I just know englis and urdu . I have large application and rich UI to convert into other language also my application gets some data from other 3rd paty api
Hello Tapan , I did not understand how that html file is able to fetch data from the json files. How are they linked ? I see similar translations are being used in our OTP project as well.
We are using NGX-TRANSLATE library to fetch a data from JSON file, if you will observe name of JSON file is similar to what we have added for language value, so on each language selection it will fetch data from that JSON file.
Example -
this.translation.use('en') than in this case it will look for en.json file under i18n folder.
@@TapanDubey I have understood now. Recently I have got review comments from Amet to use translations for the some strings to display in the UI so that it will be useful when we give the project for other languages. Though I used translation I did not understand what he exactly meant . Now I have got it perfectly.
Thank you Shiva!
I have a question as well what if I want in the same language to have for the same variable a different value bc ie one customer want to have a different name and another a different one. Can I do that? Bc the translate service reads the name of the json which the abbreviation of the language
@@georgiarammou1357 yes in that case you need to generate language file for each customer for example now we have en.json file but you will have custid.json language file under i18n folder and instead of this.translation.use('en') you will have this.translation.use('custId')
In simple steps -
1. Create customer JSON file dynamically while you are creating customer.
2. store customer language file in i18n folder.
3. change code to this. translation.use('custid')
That's all you needed , i hope this is what you were looking. Thank you for watching.
Can we access the HOME object in ts file using translate service (so that I can use it like regular objects and still I can translate )instead of accessing the keys inside it directly ?
Good question Shiva, Yes you can access Complete Home Object from component using translate service. it should be like this, here you will get response type as ANY. I will recommend to create similar interface and map it with that to get strongly typed response. I hope this is what you were asking. Thank you for watching.
this.translate.get('HOME').subscribe((e) => {
console.log(e);
});
@@TapanDubey I will surely try this Tapan , Thank you.
man can you give me sorce code .
you can find source code at -
stackblitz.com/edit/primeng-selectbutton-demo-khmex7?file=README.md
A totally nonsensical video.
If developers already know what should be the translated file, it doesn't make sense to have such ngx-translate library
You are misunderstanding the concept or may be you should study Angular first. This translation library to support multiple languages file , that is angular feature, what you are looking can be achieved by Google translate api or any other translator api both are different concept at all.
@@TapanDubey Basically ngx-translate is glorified hashmap or switch case. 😪
@@electricindro2236 it could be better version of switch case, just imagine similar code with switch it will not be as simple as this one because this is simply loosely coupled file for different languages.
i have dynamic data not static data like in json file, data may be change every time than how do this support