How to Localise Your Ionic 4 App with ngx-translate

[Music] hey everyone what's up this assignment back with a new anak tutorial and this week we're gonna talk about translation right we're gonna talk about translating your app for multiple languages so this is also known as localization and we will do the simple app with a little switch where we can choose between two languages that we've previously set up and we will instantly localize all the strings from one to the other and also store the information so let's do this I've already created a blank new I am a cab and I just tried to use these readme files to give you an idea what we did so we can start as quick as possible so I created another page for our language pop over and also a service that will manage the language and the user selected language so then most important we're gonna use the ng X translate module you're gonna need to install the core package and also an HTTP loader so we can actually load the local files and finally also ionic storage if you want to persist the selected language of the user if you just want to use like one language for a user you could also use the globalization plucking it from Cordova and then retrieve the current language settings of the user and set that language so then you don't need I own a storage alright what I did as well is I copied in two little nice icons you can find the link in the article which is building below this video and also I created two files for localization so for German and for English and inside of those localization files you can actually have a nice structure so for example you could structure it by the different pages like you have a home page you have an about page a menu page so you can easily find all the strings of your application in the right places and we can later target them with their path or you could also use like an alert or messages or however just make sure that you get some structure in here so these are German these are English take a closer look at them in a second as well so let me close this and once you've done all of this we can get started we can delete the home page actually in that case no I shouldn't have deleted it no we need this oh come on I didn't want to do this damn actually I wanted to keep the home page so I just created again and remove it sorry you can keep the home page okay but what we do first is going to the epidural and setting up a few things so first of all we need a bunch of imports I will bring them in these are the things we installed no here are the things we installed from the ngx package and then we also need the HTTP client you will see why and ionic storage that's actually the easiest of those things so we can directly call this one so then we need to initialize the translate module and also call for route but we also need to pass in some more information and especially we need to define a custom loader that loads our local files and to load the local files we're gonna have to create a new function and this one's called create translate loader and here we inject the HTTP client so that's why we have the real HTTP client up here not only the HTTP client module which of course goes here as well so in this create translate loader function we can now return a new translate HTTP loader so that's why we installed the HTTP loader package and in here we now have to specify which HTTP client to use the prefix of the file which is actually inside our assets i-80 and folder and then the suffix which is in our case dot Jason so now when the Translate module is using this functionality it will look in this folder full file with Jason and also in between it will have the language codes de or yen or whatever you got in there so then we gonna add this function to the loader and we will use provide we've used this actually in other scenarios for example with I owning mocks or you can see it in here as well it's basically the same this time we want to provide for the translate loader we're gonna use the factory which we just edit up there create translate loader and finally because we got the HTTP client injected in here we also have to specify it as a dependency so the setup process of angular doesn't crash all right now the translate loader factory is set up we got the ionx - we got a TDP klein I think we're good so far so let's go back to the actual home page module types everything so for the whole module or for basically any lazy loaded page where you want to use the translate stuff you gonna add the translate module from ngx translate that looks right to me I'm just looking at my written tutorial and I think I missed something okay yeah of course I missed something because we created the service and I forgot about the service so you could also of course directly use the ngx stuff in your page but we want to have this little switch functionality so we're gonna set up a little service now we'll actually bring in the code because this is a quick win and it's not quick if we make the video a half an hour so what we're going to do inside of our language service is first of all have a few functions actually we don't need platform anymore so we can get rid of that mmm the first thing is to set the initial a plan which and this is the function we're gonna call from the app component actually I can use this right would that make me look pretty fancy if I use this stuff from Visual Studio code maybe maybe it does maybe so in here we're gonna call this dot what's the name language service language service and then this language service set initial ad language so once the app is loaded we're gonna dive into this function now we're gonna try to get from the Translate service which is the ng stuff the current browser language for example as a fallback and basically set this as a default language so that's just the fallback in case we don't find anything out but then we will also look in the ionic storage for the language key which we've created up here if the user has already selected a language previously so in that case we will set it locally so that's just keeping reference so we can use it in the popover and set language will then call translate use that's basically the most important part of ngx translate whenever you want to switch languages just call translate use with the language and whatever it is and then you're good to go all the other stuff is just for our own application and also this little function that returns the text value and the image pet is only for our popular so get browser language of ngx translate set default is cool and also used all right now we're calling this in the beginning and I think now it's time to move on for the home module remember you need to import it for all the modules of your pages and then I think we should go to the view directly and let's begin maybe we should oh my mouse speed what happened come back maybe you should start by looking at the actual keys as well so we want to display home title and that's super easy we can type home title and then we can use the translate pipe on this and if we open our app we might be able to see language service is not a function actually I think it is a function My dear compiler well well well maybe we should reload this anyway while the reload takes place we can already continue so we got different options to use the translate of strings in our view we also might need a little come on thank you we might need a little button so let's add a button to our toolbar just to open the language pop over in a second and there we go actually my brother language seems to be German so that's why we see stats item so this is again a nice little German tutorial with assignment so we got the stats item and if we change it now so let me use English as a default we're gonna see there is not the start site anymore but now it will be [Music] come on well maybe I already got the key stored which is pretty bad so in that case we're gonna have to change it in here which will be called I might have tried out the code before we did the video so now we're back to home and if you don't trust me this is the home key and here we get started okay so we've seen that we can use the translate pipe and we can use this on a few different other ways let me bring it in so we can talk about this so basically this was the most basic example then if we use something with a value inside we can actually pass parameters to the translate and for that we need to create those parameters so let's just say name Simon and of course this doesn't have to be called parents or name that because we use parents in here and where's my JSON file and name in here in the actual localized string we need to use those keys of course so if we use home greeting you see that we got the ability to replace this we could have multiple things in here but we just pass in the name so that's pretty cool way to replace something in a string as well actually this is the same like before it's just a different syntax but the directive so in that case you got a pass into the translate property this is again the home greeting and the parents now specified as well so just another way of using this then also important maybe if you get HTML code in your translation so like here which is something I hope you can say otherwise you're not allowed to watch the rest of the video so this is du bist a pitch and in English that might be your epic actually me you already got that up front so we can see that this part is now big we got the line breaks before so if we use innerhtml and then the translate pad inside we can actually also use the HTML code finally for the button that's again just a super easy translate but now we got two more options so what we got is actually we need to open more a popover and we open an alert so quite a bit of code let's start with the popover which needs the private pub over controller there we go and also the language language popover page and I think right now this is not working because we haven't used the language popover in our app module so if you want to use it as a popover page and you using the component there you're gonna have to import the popover page module in the main module as well so now it should look like this and it works we also want to show an alert so private alert oh and of course the Popo was not yet finished okay the alert control and for the alert controller this is now the second interesting way of using the translate library so this time we're using the translate service directly in here not through our service and you can call instant on the translation which returns a translation instantly way we have thought this is especially interesting if you're using it in like an alert a toast whatever component that you need to display from code and he immediately need the translation so simply call instant and then again use the keys that you've created alert header and message alert header message use the right path and then you're good to go so now we're only left with creating language pop over so I can actually show you that we are able to switch between the languages so let's move to the language pop over page use the pub over controller in here as well and for the ng on in it we gonna say languages to an empty array we will have a selected language and all of this information of course now comes from our know from the language service language service there we go so go ahead this the link with just know it's always taking the wrong thing every damn time so language service get languages this is just to get the array of information that we need and this that selected equals language service selected alright and finally we want to be able to select a language which is known pretty easy because we just have to call set language on our language service and then dismiss the popover again and for the final view which is now just some view we only need the list we need buttons for our languages and I'll click we want to select them we got the image in front we got the text and we got a little check mark if the language is selected so now we're ready and we see currently our language is set to English hey Simon welcome welcome with the directive the HTML code and the alert shows the English message if we open our pop over we see that German is selected oh did I am hmm still got the oh yeah that would have tricked me quite good I am very good at tricking myself so okay by default we are now in the German language which is selected from the storage and if we switch over to English all the strings are now translated again to English and to German so start site hello Simon with common in the ionic academy do best alarm and saying Fela has got buying problem by the operation alright and that's enough for the German lesson today that also the end of today's quick win we're not able to create localized applications with ionic for in using ngx translate set up your language files use a nice structure in them use either the pipe or the directive in the view and in your logic use the service and call instant if you instantly need the result of the call if you enjoyed the video please give it a like subscribe below this video help me grow this channel to 100,000 which is my main goal currently still a long way to go but I count on you and of course if you want to get more great ionic videos check out the rest of this channel so I'll catch you in one of those [Music]

Channel: Simon Grimm

Views: 18,142

Keywords: ionic, ionic framework, cordova, angular, javascript, html, css, hybrid app, cross platform, ios, android, typescript, web development

Id: WEh_GY5gpkg

Length: 18min 14sec (1094 seconds)

Published: Tue Apr 09 2019