How to Localise Your Ionic 4 App with ngx-translate

[@ionhipster7221]

Hi Simon! @6:49 - One small cautionary tip I'd share is to set the default language to 'en' (or 'de' 😉) instead of the users browserLang to handle cases where you don't have a translation for their local language code. Otherwise, users may see an awkward {{ 'HOME.btn' | translate }} string instead of "Show Alert". Awesome video! 🧡

[@caducastanha5645]

Hello Simon, I've been working with ionic for 1 year, your videos always help me and I learn a lot from you. I'm really enjoying ionic 4

[@galaxies_dev]

Really glad you enjoy them Carlos, and yes I like v4 as well a lot by now :)

[@abdullokhmukhammadjonob3891]

Hello Simon. Thank you so much. As a beginner I am learning most of my coding skills from you. Soon, I am planning to post my first freelancing job indicating YOU as my mentor.

[@chmoxster]

The readme file summing up the previous steps is a very good idea !

[@maxneumann1159]

Tried different methods for localization and this is the best so far. Thank you for that nice tutorial! Had some trouble to get it working with Firebase Authguard because of the autorouting based on the auth status but moving the locale files to asset/locale/xyz.json fixed the request error.

[@caginbektas]

dude, twice a day, you made my day :D Thanks for all your efforts!

[@galaxies_dev]

Happy to hear that!

[@tininottiny8685]

This is so much fun to watch Simon. I get to learn German, curse at the compiler and learn i18n! love it! :-)

[@galaxies_dev]

Haha yeah I thought about teaching one German phrase in every video x) Glad you enjoyed it!

[@pathumjayasuriya5902]

Thanks Simon ' The Ionic Savior'.

[@UnknownIdentityDE]

Thanks Simon. Thats exactly the missing piece in my project. Your tutorials are definitely benefitial. Keep it up! Grüße aus Frankfurt a. M.

[@galaxies_dev]

Thanks a lot Steffen!

[@prasannakumarn5036]

Hello Simon.. Thank you So much for your tutorials it will help full to me carrier path.. Can you please provide the some tutorials for translating the parameters inside the objects by using of Ngfor Directive.

[@sanjaychauhan83]

Thanks simon, this is very useful to me...you are great

[@galaxies_dev]

You are welcome!

[@roshan.animation]

Hello Simon Grimm My page view is not updating, but when I go to another page and come back , the view gets updated with new language.

[@idemshall]

Once again... You saved me... Thanks a lot...

[@galaxies_dev]

Happy to help!

[@stojankukrika7242]

Hi Simon. Thank you for the nice tutorial. Can you tell us how to handle translations on modals? I try this {{'dashboard.title' | translate}} but I get an error: Uncaught (in promise): Error: The pipe 'translate' could not be found! I can't find any solution which works.

[@galaxies_dev]

That usually means something with the modals is messed up. You should add the module file of the modal to the module of the page where you call the modal, then this Angular error should disappear! Or you might have to include something else in the module of the modal - but it's something like this :)

[@stojankukrika7242]

@@galaxies_dev Can you make some tiny example of that?

[@santhoshbolla6492]

Hello, Simon. Thank you very much for all the tutorials, How can I translate dynamic content which comes through API Calls.

[@HVSharma]

You've to translate the dynamic content at the back-end and then sent it to the front-end

[@studykiya397]

thanks simon

[@joelpangop5170]

Hi Simon, thanks a lot for this tutorial but i did all the steps specified in the video but my translate doesn't work. I have a nativeStorageError code 2

[@ritesh5160]

Hello Simon, I've been working with ionic for 1 year and i have learned a lot from your videos, I like lonic very much, But i am currently having a doubt,can you tell how to use this with the rest api

[@galaxies_dev]

I think you can load the translation files from your server like this: stackoverflow.com/questions/52165296/angular6-load-translations-using-api-call-to-backend-using-ngx-translate

[@stefanomattiatroisi2018]

Hi Simon, well done video seriously. I hope you can help me: i need to manage the translate of the products in the cart. I have a service and a preload list of products, how can i use the translate to actually "translate" the product name and description?

[@galaxies_dev]

I guess you could call a function and iterate all items and translate them from code with the according function of ngx-translate!

[@HVSharma]

If anybody's facing an issue in not loading language in HTML files via translate pipe. There's minor change in app.module.ts Change the path from 'assets/i18n' to './assets/i18n/'

[@Xsoul55]

I am currently developing a Map App for buissnes and I needed some translation method, thanks ¡You saved my job! Any way we can see a tutorial on yaga-leaflet? Keep the good work ^^

[@galaxies_dev]

Hmm right now I have no plans, but of course this might change in the future! But this package looks interesting: github.com/yagajs/leaflet-ng2

[@anuragdhiman3322]

Thankyou Simon

[@LexMadafaka]

Really really useful. Thanks a lot.

[@galaxies_dev]

You are welcome!

[@علياءاسامه-ت4م]

very good tutorial ,thanks alot

[@galaxies_dev]

You are welcome!

[@HelmarBaechle]

if I use localization will all the content be translated into the required language automatically, or do I have to translate each page manually?

[@galaxies_dev]

You have to setup the JSON files with the strings, they are not automatically translated!

[@HelmarBaechle]

@@galaxies_devGrimm thanks for the advice. I have watched the tutorial on your academy in the meantime and it is clearly explained on that video.

[@ViNinjaa]

Hello Simon, you could do some content about accessibility and ionic 4,? As an app for blind peoples, etc..

[@galaxies_dev]

Interesting, never done anything on that but sounds like I should!!

[@ViNinjaa]

​@@galaxies_dev yees, it wil be awesome!

[@createfinders]

Sir using translate pipe crashes my app only work on google crome rest no other browser also when i install app on my mobile it installs but after splashscreen it showd white screen.. what is solutions for this

[@oko2708]

I got an Illegal constructor error because I forgot to import @ionic/storage into my language service. Hope this helps if people run into the same issue.

[@mikeleins6705]

Hi Simon, does the getBrowserLang() method also work on androi/ios devices later on ?

[@galaxies_dev]

Haven't tried right now but I assume it does!

[@markrumbaoa7153]

It's great 😃

[@its_j10]

Hello, My application is very big and I want to change whole application language (all the words) into different language, So it is compulsory to create a json file and write each and every words and their translated word? or is there any way to directly change whole application language with a single configuration?

[@galaxies_dev]

Not that I know of :/

[@jaydeeprathod8116]

Static data is working good but how to translate dynamic data?

[@galaxies_dev]

I'm not sure how that would actually be possible, you would need translations for a lot of strings then, right?

[@lokeshgupta5452]

Hello sir, I have minor query , if I want to translate the whole application into other language but i dont want to use the data from json file infact i want to translate the whole app data, whatever be the content in the pages will be translated into other language, could you please help me in this sir Thanks

[@lunokhodtoy]

I have problems when switching more than 2 languages, some times the swishing only hapen when page is manually refreshed also ngx-translate says in documentation that you have to manually reload translations on the switch so this tutorial is incomplete

[@khawlamahjoub2943]

hello simon ,fist of all thank you so much.then,i have this error ([ng] ERROR in node_modules/@ngx-translate/http-loader/lib/http-loader.d.ts(2,33): error TS2307: Cannot find module '@ngx-translate/core'. ) how can i solve it

[@ricardosupe5490]

It works on IONIC 6?

[@bundayyolayinka3352]

great stuff. Been following since last year! always impressive

[@galaxies_dev]

Thanks Bundayy, always appreciate loyal follower!

[@aaiz37]

Well done bro !!!

[@triple3way]

thanks simon appreciate

[@meetdurian4539]

Hi ,i need help,how to change the default language to English, I have changed many places and failed.

[@manarmohammad8232]

thank you

[@galaxies_dev]

You're welcome!

[@avishekchatterjee531]

Is this is the same way to implement the localize for an ionic react app?

[@galaxies_dev]

I haven't used React but this is an Angular package, so likely this way won't work!

[@avishekchatterjee531]

@@galaxies_dev yeah I know that.

[@erperejildo]

9:34 why you had to reboot the server at that point?

[@galaxies_dev]

Sometimes it's just not picking up changes and restarting most of the time fixes the problem!

[@guendouze77]

Hello, Thank you very much for all the tutorials Can you offer us a push notification with firebase. Again, thank you very much from France.

[@galaxies_dev]

I have a course released on that topic for the members of my Ionic Academy :)

[@aaronaaronaaron5922]

In at leatst hundreds of languages: Thanks 🏋️‍♀️

[@galaxies_dev]

Glad I could help :)

[@pramodjb2415]

hi thanks for the video but i'm getting the error --- Uncaught Error: Template parse errors: 'ion-router-outlet' is not a known element: 1. If 'ion-router-outlet' is an Angular component, then verify that it is part of this module. 2. If 'ion-router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" [ERROR ->] "): ng:///AppModule/AppComponent.html@1:2 'ion-app' is not a known element: 1. If 'ion-app' is an Angular component, then verify that it is part of this module. 2. If 'ion-app' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->] "): ng:///AppModule/AppComponent.html@0:0 at syntaxError (compiler.js:2430) at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:20605) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:26171) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:26158) at compiler.js:26101 at Set.forEach () please help me

[@galaxies_dev]

Are you using a custom component? Then you might have to import the Ionic module to the module of that component to make it work!

[@pramodjb2415]

@@galaxies_dev OK thanks

[@pramodjb2415]

hi Simon please help me

[@eldelotrodia1102]

Nice german tutorial haha

[@galaxies_dev]

;)

[@007ento]

iconscout.com/icon-pack/country-flags# flag icons suggestion

[@globaltrite]

Servus, nur weil du ein kurzes Video haben willst, ist es kein Grund durch das Tutorial zu rasen. Lieber ist es eine halbe Stunde statt ein wildes hin und her geklicke zwischen den Fenstern. Man kann nicht mal in Ruhe schauen. Will man mal anhalten bist du schon wieder ganz woanders.

[@galaxies_dev]

Sorry if my tutorial was too fast, I'll take care of navigating more slowly the next time!