Introduction to Internationalization in Angular

How can we create a button to change locale in the runtime for users ?

I really like these videos. The presenter is awesome, the content creation and curation team is wonderful as well. Within 8 mins, we got the concept of how this is going to work. High five to the team!

This tutorial is very good, but it forgets the most important question. How do you get the country code (for example, /de or /en) into the routing of the Angular app?

A little sucks that can not change language dynamically

Shitty solution! You cannot maintain the app.

OMG it's ugly this approach!

ng add @angular/localize
ng extract-i18n --output-path src/locale

go team😃

each time i run ng extract-i18n, i would have to rebuild the locale versions ? is there .xlf tools that handle that ?

Is there any way to hide the default locale from the route path?
ex: my default locale is "pt"
I want to use it like: localhost:4200/home instead of localhost:4200/pt/home

in other locales, its ok to have it in the route path.

Witch version are you using? Using cli 15+ doesn't work nothing happens no errors just don't work, in my enviroment i create a project with cli 12 and works fine but using 15+ don't.

Well done

is target tag gets the translated text automatically or we need to set that manually sir!. because i didn't get that translated text by default sooo...

How to do translations in micro frontend architecture? how to sync the language switch between shell and remote?

select default arabic in angular

I don't see the translation in the app, I have no Idea what I missed

I got an error after running "serve dist\with-localize-two\"

serve : The term 'serve' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again.
At line:1 char:1

hi, i want dropdown to switch language and want to add more than 5 languages. so how to add target for that and how to add target once for whole page in different language

how to configure an IIS server to support Localization?

I want to have an option tag and select the language I want. How can I do that?

Great explanation! Thanks

That's great, but this is just the tip of the iceberg, switching language (with route or select option) is another story that is sadly not covered in this tutorial and could have been really useful for beginners like me having just the internet to learn.

If we have 40-45 languages, how we would handle it from angular.json ? In previous version can simply use i18n-file, i18n-format, i18nLocale params with build

Great content !

I am getting below error
An unhandled exception occurred: ENOENT: no such file or directory, open 'C:\Users\u1281417\myapp\src\locales\messages.hi.xlf'
FYI I have also added @angular/PWA in my project

To me doesn't make much sense,
so we generate the xlf file.. copy.. edit, and translate. so far so good.
later we need to add another translation.. remove others..etc
How is this suppose to happen exactly?
every time we make an update we have to go again trough the whole file and add the translated <target> element?

This approach is much smoother than a lot of other implementations of i18n I have seen. Good job, team!

In my humble opinion, the reactive approach are much better. less boilerplates, better readability and easier for deployment. for large scale applications, probably, I will still have to refresh the page, but it's a small price to pay :). Anyway, a new Angular 15 it's a blessing! I was waiting for a standalone components for many years! Thank you for your great work!

what is that vs theme

Hi @Angular, I could not find a way to add missing common locals, for example I am trying to add ht (for haitian creole). I see that they are extracted directly from CLDR. I translated all the necessary ts/js/mjs files but they are not in the node_module. @import seems to ignore it

I came up with my own solution in Angular 6 back in early June 2018. My site supports multiple languages, and even switches to your preferred language such that you don't have to. It's good though that this comes as-supported in the later versions of Angular.

How do you get autocompletion for angular.json in VSCode?

I do use translation run time (cause I support only 2 languages).

The performance issue with the binding I solved it using with a pure pipe with an extra parameter (language) which is triggered only if the language changes:
{{ 'Category' | _: trans.lang }}

The only thing in Angular that I don't like. I wish it was similar to what android does for localization. But it's good that we have a way of doing that.

Thank you for this content. Could you also tell how to deal with i18n when using *ng-Stuff (like *ngFor, *ngIf....) In the version i have tested it is just disappearing silently... and grey hair appear...

I only ever used the approach where you have messages.en and other files and reference a specific key which has a value in every file for the respective language. This approach seems very complicated to me and I don't see the benefit. Can someone enlighten me?

Love your work, love Angular, so much things to make life easier, thanks.

Hi Mark, how to switch between these two languages? My app keeps staying in the translated version.

Im not sure what is going on. Where did the Translation service come from? How was the build done? Are you saying there are multiple builds, one for each language?

Amazing tutorial.

I need this tshirt!

Done !

Hi, I am looking to internationalize my application, but when looking online no one is mentioning anything about a button to switch between languages. Is this because the browser is detecting the locale of the user and loading the right translation dynamically? And how would one code a button for users to switch from one locale to another? Thanks in advance

The command `ng extract-i18n --output-path <path>` is now changed to `ng xi18n --output-path <path>`

Thanks a lot🙏! I like so much angular and this video really help me. But I have a question that is not concerned this post a lot. How to use angular with websocket ? (receiving notifications for the back-end for example or making a chat application in angular).

Is there a way to print a different currency symbol according to the locale? Like $, € or £? In your example - and using currency pipe - the total amount gets formatted by the $ sign stays the same. Thanks in advance!

This looks simpler than what it really is :) I wish you would cover one issue though, when new pages come in, and we extract all over again, what happens to the existing translations? do we have to extract to a new file then merge manually? or does the merge happen automatically?