Angular - Translations / Localization Tutorial 2024 (i18n)

hello my name is Alex and in this video I'm going to be showing you how to add translations or internationalization to your angular project and to do that first we need to install a specific package which we're going to be using for that purpose so first of all we want to run npm install ngx translate core so we're running this command this will install ngx translate and then we need to also install ngx translate HTTP loader which is another package that we're going to be using now with our packages installed I've taken the Liberty to create a folder inside of our assets called i8n where 18 stands for the 18 characters between I and and in the word internationalization and inside here I've created two Json documents the first one being n. Json which stands for English and the second one being l. Json and the only difference is the actual text within those two documents so the way this works is that you can actually create any Json structure so this is just a normal Json and then you can split it into sections into objects and then you can have different translations and different subobjects for your components Pages Etc so in this case I have an object called general which is meant to have translations for commonly used um commonly used strings like hello and then I also have an object for my homepage which just has a title which I've set to home now I've just translated these into Greek in my l. Json file so this is how you create your translation files now with your translations files uh made all we need to do is to go into our application module here and we need to create a new method which will actually handle uh the loading of those translations so all we need to do here is to actually import the necessary packages and then we need to declare an HTTP loader function which is essentially used to create a new instance of the translate HTTP loader method which in turn essentially takes care of loading our translation files now with our function declared we need to add the translations module to our import array and to do that just add the following lines so essentially we're adding our translations module and then in here we are specifying the four root method uh which should be used in the root module to provide the translate service service which we're going to be using later and in here we're specif specifying a loader object which in turn utilizes the function we declared earlier now in here we also need to use our HTTP client so we need to import it since we don't have it at the moment so let's just import the HTP client directly and we also need to import the HTTP client module and now all we need to do is to also add the HTTP client module to our Imports and we also need to go to our providers and add the HTTP client there as well and with that being done we're pretty much good to go now before we actually start um using our translations we need a way to set the default language and to do that let's go into application component and let's declare a Constructor here and inside of the Constructor um first of all we need to declare our translate service like this so let's go ahead and import that up here as well and the reason why we can now use the translate service is because we declared the translate module with the for root method inside of our Imports so from here on we can go ahead and set the default language by saying translate set default language and then the uh name of your language based on the files that you've generated and placed in the i18 and directory so now we can save that and now we can attempt to use the translations in question so first of all let's go ahead and and let's open up our application component here and I want to create an H1 which is going to be our title and add a uh two pairs of curly braces in here now to declare your translations you're going to be using uh quotes so I'm going to be using single quotes and I will say home. tile and this is essentially the path to the title uh parameter here inside of my home object in my uh Json file right here so I'm just saying home. title and then to actually translate the uh string in question all I need to do is use a pipeline and say uh translate so we're using the translation pipeline here now if we save that and if we go into our project here as you can see we can see home up here so the translation has been successful F now let's also try to add the hello string so we will make a new spannable in this case and we will do the exact same thing so I will just say general. hello and I will just add my translation pipeline I will save and as you can see everything works perfectly well now let's test if the git translation also works and to do that let's go back into our application component and change the default language to L and as you can see when I switch back to my project everything works fine now one question you might have is why we're using the i18 N folder specifically and how does the translation module know where to look so by default the trans the translate HTP loader will always look inside of your assets folder and if it will try to locate the I8 uh and directory you can obviously change that and that's actually pretty easy to do if we just uh specify the directory uh inside of our uh translate HTP loader functions parameters and we can do that as follows we can just say assets and then slash and then we can just say translate like this H and this will actually change the directory from i18n to translate so if we go back into our website as you can see uh nothing is being rendered and if we go into inspect and if we go to console as you can see uh there has been an error because our HTTP loader has tried making a local request because it is an HTTP loader so it essentially attempts to fetch our files using the HTTP client it has attempted to find the translate folder but it failed so as you can see nothing was displayed now if we go back here and if we rename this folder to translate like this and if we try again as you can see everything works fine one last thing I want to mention is that if you make a mistake in your translation paths right here so basically for example instead of saying general. hello you say something like General one. hello you won't receive an actual error but instead you will be given the value before the pipeline was applied and you have to be very careful with that because in such scenarios you might accidentally misspell a path to a specific translation in your Json object and you might not notice it um until it's too late and you might have incorrect or missing transl ations somewhere in your project so you should always be very careful when uh spelling those paths and you should always double check and ensure that you don't have any missing translations this is why every single Json object inside of your translations folder should be identical with only the values um being different so only the translations being different uh because otherwise you will end up with cases where uh your website might properly render your translations in one language but then fail to render your translations in a different language because of missing objects and that's pretty much it for this video I hope you found it helpful and if so make sure to leave a like And subscribe and if you have any questions or requests for future videos make sure to leave them in the comments below and I'll see you in the next one

Channel: Code Deck

Views: 1,454

Keywords:

Id: Sgpfov3IEic

Length: 9min 57sec (597 seconds)

Published: Sat Dec 02 2023