Multi-Language Support in Angular: A Guide to Localization and Internationalization

Internationalization, often referred to as i18n, is a strategic process that involves designing and preparing your project to function effectively across a wide range of global locales. This approach ensures that your project can cater to diverse linguistic and cultural preferences, making it more accessible and user-friendly for people worldwide.
Localization, on the other hand, goes a step further by tailoring specific versions of your project to suit different locales. This process includes extracting text for translation into various languages and formatting data to align with the preferences of a particular locale. A locale represents a distinct region where a specific language or language variant is spoken, encompassing countries, territories, and even specific geographical areas. The locale dictates how various elements are presented and understood, including factors such as measurement units (such as date, time, numbers, and currencies) and translated names (like languages, countries, and time zones).
GitHub: github.com/funOfheuristic/loc...
Some more playlists:
Create PWAs: bit.ly/359BXpK
NgRx: bit.ly/2Qu0Ucu
Performance optimization: bit.ly/3fFa1Q8
RxJs: bit.ly/3hytr8o
Angular Tutorial: bit.ly/2Tnwk1t
Dashboard with chart.js: bit.ly/3c9Jd85
Application Development: bit.ly/398w7Gf
Upload File to server: bit.ly/3ccsjWd
Data Structure and algo: bit.ly/3c8b7Bh
Discord: / discord
Slack: bit.ly/2RXPcEK
You can support me on Patreon: / funofheuristic
Equipment used for Video (India links):
Headphone (ATH M50X): amzn.to/3xDcSQK
Microphone (AKG D5): amzn.to/3b1gi5R
Audio Interface (EVO 4): amzn.to/327tnGJ
Camera(Canon 200D): amzn.to/3ja1Pr9
Thanks for watching...

[@salimsulaiman1909]

Thank you very much. Got to learn i18n and implemented it at work 👌👌

[@abinashsamal6298]

Thank you but here you have to run the app specifically for required languages; what are scenarios when you can run the app once and can change the language in the ui?

[@user-cy1mc4yk2l]

Thanx man, you always explain nice and easy

[@margoni5851]

You saved me, thank you so much

[@dingmarius]

How to translate text from api (normally like string config) in angular app?

[@vsh-torch]

Great. Thank you

[@Chiving]

Good video, thanks

[@user-ge7hx8fg5f]

How to use different route

[@ultrawhiff]

Hi, please guide me if you know.
I am using angular 17, when i do ng-serve, it says An unhandled expectation occurred: Requested locale ''es-CL' is not defined for the project. I even declared localize array in options

[@user-ge7hx8fg5f]

how to use multiple route

[@mohammadrezamrg9380]

We have to define locale in angular.json file, So we cant use dynamic translation from backend

[@FunOfHeuristic]

This is helpful for static content, for dynamic content you should use some translation service.

[@serpolama3077]

please can you tell me, how can I switch to multiple languages through select option from front end ?

[@FunOfHeuristic]

In this way different languages will come with different bundles so they are different applications all together so you can just route to the corresponding language bundles.

[@MultiWarrr]

Thanks alot

[@user-gx4js4oh8r]

Thanks but How can we change dynamic value.

[@FunOfHeuristic]

To translate data on the fly, you can make use of the Google Translation API. However, it might not always provide accurate results. The best alternative in such cases is to employ a dedicated translation service that can be verified by a human for correctness.

[@user-iq334]

How do you switch languages say by a dropdown menu?

[@jasonr9565]

same question here

[@FunOfHeuristic]

Hey, in this case, since all the languages are different applications, after they're built, you can simply redirect the user to the required local site. For example, if you host three languages, you'll have three applications in the "dist" folder, and you can link to them from a dropdown menu.

[@jasonr9565]

@@FunOfHeuristic i was wondering because i do have two dist folders with the both languages, but i don't know how i can add them to the options of the dropdown

[@user-iq334]

That would work, but I was thinking of a way to test it during development@@FunOfHeuristic

[@robertomessa9126]

what happens when you update your app? if regenerate, you loose it all?

[@FunOfHeuristic]

That's why we have 2 files in this case, if you will support 3 language you will 3 file one is auto generated and other two are for two languages and English is default.

[@robertomessa9126]

@@FunOfHeuristic the work made in the other 2 is lost?

[@FunOfHeuristic]

@@robertomessa9126 no it will not

[@robertomessa9126]

@@FunOfHeuristic how so? the default will be regenerated, the other not

[@FunOfHeuristic]

Only the default will be generated and you need to copy the new generation to your respective translation file and add transitions text inside it.
If you notice the default one it doesn't has target we need to add the target manually

[@ashrafjefrizin4630]

i dont prefer this official localize from Angular. ngx-translate approach more clean imo.

[@jahsan4471]

does ngx-translate support RTL. Also any good latest tutorial on that?Thanks

[@GKT196]

Hindi wala bhi bna dete 😂

[@user-cm3mg5hb8i]

are u guju