Multilingual angular 8 apps with ngx-translate

[Music] hello everyone this is Kalyan from black box take and in today's episode I will be discussing about in GX translate in the last video I have described like how you can utilize angular CLI to create a multilingual application but in this today's episode I will be saying another popular module called ng x translate which support JSON and you can create multiple Jason's based on your languages and it is also using HTTP loader to load those JSON files in the runtime when you switch the language so without further delay let's get started so first of all I will create a new project using angular CLI so let us change the directory so the first thing we need to install couple of node module four injects translate so I will do npm install the first one is at ng x translate the core and another one will be in GX translate slash HTTP loader and I'll also pass save to save the dish to the package transition so this is installed and also in package torjussen you can find this has been added so translate core and HTTP loader has been added to our package transition now the next thing is we need to move to a and then F module so inside AK module the first thing I will do I will import those module here so the first one will be translate module from ingest on Slate core and the second module I also need to be imported from here only so that is translate loader ok and the next thing I will import is translate [Music] HTTP loader but this is from our HTTP loader so from in GX translate HTTP loader also we want HTTP module HTTP client module here as well so let's import that and also HTTP client from angular 1 distributive so once you import that the next thing is we'll just put those into our import section so first one is HTTP client module we need to input and then the second one will be translate module and then it will be for route so remember we have two option for route and for child so if you are using a lazy loading then you need to use for child and then your main module will use that so for lazy loading you need to use for child but as we are in our main module so we will be using for route here for you too and then within that we need to pass our loader so then loader and inside that we need to pass the provide option so provide option will be translate the translate loader one and also we need to use factory and that factory will be creating shortly so because that factory we need to create let's just leave a comment here and there is also a dependency so dependency is httpclient so let's create that so HTTP client is dependent because this HTTP is used by injects translate to pull those JSON language files and use for translation purpose so the next thing is we'll have to create this Factory so this factory function we need to create we can create it here so let's say we are giving a name export and the function name will be say HTTP loader factory so we'll be using HTTP as HTTP client and then will return new translate HTTP loader and will pass the HTTP here they use this function name as our factory so for this module that's it and the next thing is we need to move to our F component file so first we'll create I will be removing all this from here I am going to create a complete new so the first thing is I have I can created leave here and inside that there will be an h2 for an example and I can create a paragraph as well and then I have a label and inside that label I will have a select tag inside select I will have some options so this selector is basically to switch the application here so first of all to foreign as an identifier I need to define a variable here so for an example I can put say language selector so whenever there will be a change in this so on change event what we need to do we need to do translate and use so this is the variable Lang select I can copy that and then when so whenever there is a change event it will pull this variable and use that value right now let's remove that and this option we need to look so in g4 so keep this portion here let's move to our PS file first because we need to get the data so in a component so first thing we need to move over to the translate service so let's import that translate service and that is from at mgx translate code so say we need to pass this as from constructor so let's remove that so inside constructor will be constructing this public and then I can name it translate and translate service and then inside this I need to do few things so I need to define the data few language so example translate dot add language so I am adding few the language so for now this example we'll add so this is an area actually so you can see a day off screen so so this is in and another will be and then so we need to set some default language here so translate dot sit different language so this is a string so it will be English so en for that and then I need to sit some constants a give it a name of browser so name it correctly mmm traditional browser from slate and translator a method called gate browser left and at last I need to give some fallback so first of all we can see till this like translate dot use it will check like browser it will try to match so browser length match and if it is found some match here for an example it will look for English and then if are as well so this regular expression and if it's match with that what we are saying if it's match in browser length or it will be forward to English as default so this is here so it will first try to match these English a and then if it's not match it says then browse online or else it will fall back to english so in the HTML go to HTML now we have to fill up with awhat this language is stove idiomatic so yennefer so so we can declare so let line so it will be take a very well lit length of translate dot Gatling so it will look through it and then or it will create those options so for an example we have English and French so it will create two option one is for English and another one will be for French now inside asset folder I will create a new file first a folder called I a tenon within that folder I will create a new file for our first language English so it will be en torjussen so basically the idea is to fill up all this text for title paragraph everything from that JSON file from the language itself so for an example in the title will be inside the h2 tag and that can be like Hello Angerer with in GX translate and the paragraph text maybe this demo has been created using ngx translate and also so let's create our the Jason structure with inside the Yendo jason file so the first node will be home and inside that will create the first key called title and I will just copy the text from here the second one will be the text I will again copy this text also we need some level for this our select element say for an example it will be select language so let's create a new key for that as well give it a name kind of man giving a name of select and adding the text as value so this is instruction JSON structure need to be corrected now let's bind this text from word JSON file so for an example the key node is home so the title will be home door title and we'll also use the translate pipe along with that so there is other way you can also use the translate directory but for this demo I am using translate pipe so for the text I'll be using the same like home the main node and then that dot text and also pass the translate pipe and for select I'll be using the same way home dot select and then the translate pipe in the meantime I have also created another file copying the India treason to faint or a fringed audition if our audition and now I am correcting the value attribute binding so this if our JSON is just an exact copy I just added the if our value to check if our application is working fine and later we'll translate the value using Google Translate so let's start the application using ng serve so you can see the default value loaded as English and the translated value if I change to Fr you can see the effort or jason has been loaded now what we'll do we'll open Google Translate and try to translate our effort audition text with the proper value so let's copy the whole text and we'll paste it from English will be going to translate the French version just copied back I will again translate the body text and at the last I will translate the select language text so now if you check our application you can see this is working correctly so default is English once we change if our this text will load from effort of Jason now if you inspect and so the now see the network tab you can see the why default it will load en door Jason at the first because we have selected English at default language and when you do the change event in the select element it will again load the effort or Jason through HTTP loader of HDX translator this way you can actually add multiple language and you need to pass those in the add language array and again you need to create the JSON file based on those language into IE teen directory and you can load multiple language using that also I will going to show you another application which is or not though it's not a free application but it's very useful to keep sync between your different language files so this is called Babel edit and there is an option for angle in GX translate as well so the thing is you need to just drag and drop your language JSON files into this application so what I will do I will just we have two files en dot JSON on it for Jason I will just drag and drop those two files in this application now so once you do that it will parse the decision file and will find for the similarities so both the JSON files have similar structures and currently have three keys so it will read like all these things and I will try to keep in sync so let's add a new key so first we'll configure the default application so we select English as our different language now once we add a new ID say it will be home door test so I'm creating a new test and I will add any of the text here in the in English language section and if we click now on to the French part it will try to using Google Translate we will try to provide you a translated text and if you click that it will autofill that particular section now if you save that file into your root application application root then it will also automatically right back to your existing json language files you can see that title has been added in the both the file it will automatically sync and add that title key into your application so I hope you liked this video and will again come up with the new tutorial next week till then please like share and subscribe to my channel thank you have a great weekend ahead [Music]

Channel: BlackBox Tech

Views: 46,092

Keywords: ngx-translate, ngx-translate example, angular translate, angular-translate, angular, i18n, angular2, angular tutorial, internationalization, typescript, angularjs, javascript, ionic, angular internationalization, translation, angular 2, angular4, angular tutorial for beginners, angular 6 tutorial, ios, android, internationalization and localization, angular course, angularconnect, angular i18n, angular 8, angular 6, ionic 4

Id: KCC5-PKBg4M

Length: 23min 36sec (1416 seconds)

Published: Wed Jul 03 2019