Angular Video Series Part 25 | How to localize your app in Angular

Angular Video Series Part 25 | How to localize your app in Angular
How to localize your app with Angular!
In this video, I'm talking about how can you translate your app in Angular.
Internationalization is the process of supporting multiple languages in your applications. So basically you should use localization to give your app life beyond your language.
And localization in Angular is not the easiest setup, it has some nasty configuration involved but eventually, you can get it done.
This can be accomplished in Angular through third-party libraries, such as ngx-translate, or you can use the built-in i18n functionality.
************************************************************
Previous Video: • Angular Video Series P...
Next video: • Angular Responsive Des...
Full video series • Full Angular Course
************************************************************
0:00 Intro
0:40 Prerequisite
1:00 Coding HTML template
1:25 Add i18n tags
1:40 Configure Angular app to use localization
3:00 Adding localization
4:50 Testing our app
🧿 I discussed:
✔️ What is the Internationalization in Angular
✔️ How to use i18n
✔️ How to add translations to your app in xlf file
✔️ How to setup locale configuration
👉 Linkedin:
✔️ / slobodan-gajic
👉 Portfolio:
✔️bobangajicsm.github.io/portfo...
👉 Twitter:
✔️ / _slobodangajic_

Пікірлер: 31

  • @CodewithSloba
    @CodewithSloba2 жыл бұрын

    Full video series kzread.info/head/PLjsBk8SIQEi-RqkglLcn19TaeeopcuDXV

  • @cajosba

    @cajosba

    Жыл бұрын

    A good topico would be how to host and navigate between languages.

  • @udhayasankar113
    @udhayasankar1132 жыл бұрын

    Great to see new video in angular series

  • @CodewithSloba

    @CodewithSloba

    2 жыл бұрын

    Thank you, more is commenting 🙏

  • @Behzad999able1
    @Behzad999able12 жыл бұрын

    Thanks for sharing, it is a very useful tutorial.

  • @CodewithSloba

    @CodewithSloba

    2 жыл бұрын

    I’m glad you like it 🙏

  • @zzing
    @zzing2 жыл бұрын

    It is interesting to see how it does it. We use an internal library as we need to do strings by tenant and language, so we reference a larger tree structure to reference the strings instead of an english source.

  • @CodewithSloba

    @CodewithSloba

    2 жыл бұрын

    Yeah that’s very interesting finding

  • @jamesdamildetienne326
    @jamesdamildetienne32610 ай бұрын

    Nice video by the way love it , is it possible to localise an app without changing the routing ? like without puting the language in the route like "home/fr , home/en" to just home ? and what if I want to add a dropdown to change the language ? thanks

  • @CodewithSloba

    @CodewithSloba

    10 ай бұрын

    Yes, of course both of these are possible, but usual practice is to put language extension in the url if you have multiple languages

  • @ranjiththambithurai8478
    @ranjiththambithurai84782 жыл бұрын

    when i click any dropdown i want to change the language how should we implement that?

  • @CodewithSloba

    @CodewithSloba

    2 жыл бұрын

    i18n can’t do that, you need ngx-translate for it

  • @nerdiloo9863

    @nerdiloo9863

    2 жыл бұрын

    Yeah .. with the built in directive you can't change languages on the fly; you'd have different sites (e.g. us, in, tw). With ngx it is changed on the fly however.

  • @MilanJovanovicTech
    @MilanJovanovicTech2 жыл бұрын

    What about a library like Transloco?

  • @CodewithSloba

    @CodewithSloba

    2 жыл бұрын

    I haven’t used that one to be honest

  • @MilanJovanovicTech

    @MilanJovanovicTech

    2 жыл бұрын

    @@CodewithSloba I like it because it uses JSON for translations, which is much easier to work with. And the integration is silly simple.

  • @santhoshkumari6948
    @santhoshkumari69482 жыл бұрын

    Hi, how can i implement json string file.

  • @CodewithSloba

    @CodewithSloba

    2 жыл бұрын

    you mean different extension?

  • @waldBestMusics
    @waldBestMusicsАй бұрын

    how to make changes if you add new code and new targets ?

  • @CodewithSloba

    @CodewithSloba

    Ай бұрын

    Can you be more specific

  • @waldBestMusics

    @waldBestMusics

    Ай бұрын

    i mean if you are making changes to your html page by adding more i18, how to make it visible directly in the language files and merge it ?

  • @CodewithSloba

    @CodewithSloba

    24 күн бұрын

    you just need to re-compile it again

  • @kiriloffice
    @kiriloffice2 жыл бұрын

    I like more json translation files

  • @CodewithSloba

    @CodewithSloba

    2 жыл бұрын

    That’s valid

  • @schlingelgen
    @schlingelgen Жыл бұрын

    This seems to be very complicated compared to other known approaches (not your fault)

  • @schlingelgen

    @schlingelgen

    Жыл бұрын

    Just to be sure: After translating everything and offering multiple languages, the app still cants react to my preferred language? I need to specifically build it for every language and set up a server to forward the user to the respective app? Please tell me this isn't true.

  • @CodewithSloba

    @CodewithSloba

    Жыл бұрын

    @@schlingelgen No actually that's not the true. You can use this approach and switch your app to language that you need.

  • @schlingelgen

    @schlingelgen

    Жыл бұрын

    @@CodewithSloba Glad to hear that, found some sources which stated exactly that - thanks for clarifying!

  • @CodewithSloba

    @CodewithSloba

    Жыл бұрын

    @@schlingelgen You're welcome

  • @pavanbashetty3409

    @pavanbashetty3409

    Жыл бұрын

    @@schlingelgen Can you please share these sources. I am facing the same issue

Келесі