Angular Multiple Language Support using Internationalization (i18n)

hi this is sreenivos tomato founder of nice.info this video i'm going to explain about how to implement angular internationalization it is nothing but supporting in multiple languages with your application like if you see this demo so this application right now is supporting french and spanish and that to this application works working in a lazy loading design pattern so i'll just explain you the quick way how we can implement and how you can set the default language and how you can change your language all these things i'll explain uh let's jump into the project at starting a new angular project like you can create a make sure install the angular cli and the node latest i think angular came up with a 10 now so clear it off and ng a new angular translate so i'm creating a project we need a routing and sas so this will take some time to pull up all the dependencies so project card generator let's uh go to the project folder and let me open this with visual code so this is a basic project structure so go to the app i'm going to create two folders called pages i'm going to maintain all the pages here and then i'm going to create another folder for services and this here i'm going to write a service so in this i'm going to create like you know home and the settings pages let me use the same ng command and ng yep generate and if you want you can give like this and component and pages slash home so what i'm going to do is i'm going to because we're going to convert this application into a lazy loading uh that that we need like you know there is a module we need it so i'm going to create a module so the android application works based on the module that is what the laser loading is so if you look at this it's uh basically the default one works with the app module but now it works individually and the same way i'm going to create uh settings if you want you can give the short way as well and same folder side and the settings and for settings as well we need a module so i'm just giving a shortcut as m even the module got created if you look at this the module got created so let me keep it off and now we need a router file uh everything has individual router files so i'm going to give routes.ts and there is another one i'm going to create called routes dot yes so unfortunately we don't have a command to generate this so and basically this is an export class so export so all the home related routes we're going to export so i'm going to give the same name and this is basically the route and it is an array so and there it looks like this and here it will be the path and the component what exactly we are going to connect so here is the home component so that basically imports and we need to import the route so i think there's some reason our input is not working let me import that out and the same piece of code you can copy paste into the settings so you just change the settings component here and this is going to be settings and save it and it will take it off all the stuff now back to the module i think the routes are basically we need to connect with a module so you need a like router module and for child and here you have to import the home routes in here as well like you know home component and you have to export so why are we doing this because we're going to clean up this one so basically it imports everything here so we're going to cut off everything install these components we directly import the module yes it's exports and the same way like i'm just going to copy paste this here as well in the settings looks good so far and now let's go to the app.html and you'll see lot of code that's a by default one we don't want this we need only this so let me clean up everything and now come to the app module so here we're going to disconnect from the actual default one to the uh lazy loading one so we don't want this anymore so we going to import with the routes actually and better import the history decline module because every application need to connect with the http stuff like the apis everything so i'm going to import it import that so just to client module so we imported the http client module so looks good now just jump into the routes so here is the default routes here so here we're going to make it a lazy loading so so we are going to use these routes and create an object for all the lazy loading components the first one it comes with a path and for the home component i'm giving by default as a home uh so i'm not giving any path which means so when you launch the application or directly go to the home and then it's a load children and then this is kind of a method and now it comes import and then here you have to specify the path basically goes to the pages and home and home module and this is a promise so let's get the response and specify the m dot or module that's it so the same thing the same structure you can reuse it and just paste it and here i'm going to give settings and this one i'm going to connect with the settings one and this is going to be settings so let's uh run this application and we'll see this is running good or not so meanwhile if you look at this application this is 10.0 so launch the application at four to zero zero so if you look at this it's directly going to the homeworks and the settings if you go it says setting works so how to identify your application running on the lazy layering mode uh let's inspect and try to install the algorithm so i agree is a plug-in to check the angular stuff so if you go here and when you launch this home it only pulls up the home component the default one it pulls down all the whatever you import all the things that come up but this basically the home module has home component that is only pulled down so and the same way if you go to the settings and it goes to the settings one i don't know some reason for the 10 it's not working good but yeah i think you'll maybe they'll update this soon yeah so now the both pages are working uh let's let's install the ngx translate plugin so angular is offering a plugin called ngx translate you can install using npm so it's called ngx and translate and core and we need a njx translate hdb loader as well because we're going to deal with multiple languages every language file is a json file so the same way we need the http loader so we got the plugins card installed if you look at this here is the latest one for install let me clean it off everything and so go to the assets folder and we need another folder called i 18n so this is the international standard you can check that i 18n so it's an internationalization uh format of standard so here i'm going to create files like en.json again as english it's a default structure kind of json object so i'm going to create another one called french for one more and there is another one for spanish so yes jason okay uh let's uh forget about other two let's work with iem so right now i'm going to create uh we have two pages right now so i'm going to create like home like this and and i want object for home and the same way for settings for the colon here so basically this is the structure so if it is a title i'm going to give title like i'm going to give home page and let's give some welcome text so let's give my slogan and here i'm going to give another one so basically this is the reference key and that's the content we are going to tag with the page so this is a basic one the same thing we're going to repeat it for spanish and the english so let's copy this i would initially what i do i'm going to add like this later in summary just for prefix i'm adding like this um and the same thing i copy and paste here okay so we created a en file so let's work with the app module to configure the with the translate module so this needs the export function uh and we need to specify where exactly the files json files got located and then http then http client and here is the location you need to specify it is assets i 18n and slash and then so what kind of formula it is it is a json format so let's import the http translate module so basically you need uh these these three modules need to be imported and go to the imports and use this uh translate so this is the default structure of implementing this the basically if you look at here with the module is setting up in the root level and we are connecting this factory way where exactly it got located and it works with the http client so i just connected this so working good now so and still we have some work to set the default one which one is the default one here so far that there is a thing called uh dot use but instead i'm going to create a config file so i'm going to create a service for that so that we can manage very well so and i'm going to use the same command and then we created a services folder and i'm going to give translate config so because this translator has already used in the code so i'm sorry i just instead of gif so if you look at the services we have the service got created and now uh there is a service the default service we need to import like it's called translate service so import the translate service from the ngx score the the one i'm going to construct here so the default one so this way wherever you want you can import this directly so the default language is en i mean it directly when if you import this translate config service it goes to the en and picks the en.json file and i'm going to give a change language as well it's another method on type i'm going to give string so i'm going to use the same service and type so if you have a settings page and you can call this method and pass the whatever you have different languages and you can set it up so that way you can use this so basically we imported this in the root level so you no need to include it anywhere in the module but if you are specifically using for specific module like homework settings you can remove this and remove this root i mean and you can include in the module so that is what the lasik loading works so now let's go to the home module or sorry home component so you can directly import the config translate config service so that basically like take care of executing the constructor method so just like this and the same thing for the settings looks good let me go back follow the same structure and now let's go to the home dot html so we have homeworks right now in store like i'm going to give a h1 tag and the reference of this content is like home dot title so go to that just give home dot title that's a reference key and just give a translate pipe and just save it let's see the output how that works so home dot item so basically this has to be translated let me restart my server so because we installed some new plugins uh every time when you install new plugins you have to register the server otherwise it it says it's an error mostly when you deal with the modules usually we get this yeah we usually started it but uh i forgot to tell you one more thing and here also we need to import the translate module should be here and for the settings as well the same thing update the i18 path here i missed it so i imported everything and i restarted the server and let's launch that application and if you see that there is a home page yeah this one and if you want i can give another h2 tag for the again with the translate and the home dot welcome text i'm giving the same thing here translate pipe and the settings dot title here and if you look at that the content got changed here and let's go to the settings and let's connect the pages like like this i'm going to give so i'm just giving router link like settings like settings page so even this one also i'm going to translate here uh connect with the setting speed so it's title and this goes there like in reverse way here it will be the home and it's a default page so we are not giving anything so let's save it and see how that looks like so home page and the settings page so this is how it work and let me drop off these we don't want anything like this so here in the settings i'm going to create a button called button for changing the language so i'm not giving any drop down right now i'm going to give the buttons for click action so let me decide the function name let me give this english and the same way i'm going to give for french and the spanish i change lang to this is fr and yeah and like yes for the file name so we don't have a function at so let me go and create one so this basically type comes from the click action so and then this we have a config service it's called the config service and we have a chain language and then just change the type now let's see what is going to happen uh so we have three buttons uh i need to form it properly like when i change to fringe the fringe one the reference is coming and the spanish is coming when i go back things is changing like this so which means it's working good so there are some couple of uh ids out there for translating entire json object but right now i don't have any options so i'll use google translate and basically i change it but if you want you have a specific name uh you can change with fringe let me fringe so this is a fringe i'll go to the fringe and replacing with this and the final one for the welcome text so if you don't like this maybe um maybe it is a different term for your application you can change it for your language maybe you need a language expert to change that information so we change for french the same way we need we need to do it for spanish so this is the most popular in us the second language okay let's uh see that got changing yep if you see the fringe and yeah i think you have to format it properly otherwise you'll get an error okay let's go back and this will take refresh and yeah now it's working fine and if you look at my demo just use my mother tongue and the tamil and so that way you can see the most uh different one like you want to display some phone numbers and the emails on the application they're actually coming from the backend api so that you don't want to cancel it but it is part of the content like email text i use like like email us at like it's basic uh the dynamic content is coming from the backend so you have to give a reference like this and and the text is the same and then if you have a continuation text also you can add but so how we're going to deal this kind of stuff like let's go here for example i'm going to give a constant i mean the public for email so this value basically it's coming from my backend but right now i'm going to fix it here so we cannot translate the emails right so so this one uh how we're going to deal it is like i'm going to display the p tag and then so basically this comes as an inner html and then double quotes and single quote and the home dot email text and the pipe translate and then call in and you have to pass the value for the email because that's the reference for that so here i'm going to give email so i think there are so many emails here i give different name here uh email response so that's the email response i'm giving here let's save it so if you see that the content is coming good and except the value is not changing let's quickly change that into email yeah this is how and if you see that changing and if i change into french and going back so it's completely changing to french and if you are dealing with like multiple values if you look at this demo so there is a let me change to english and when the value of two added to the value one equal to three and if you want to increment and decrement if you see this string is like with the two multiple dynamic values that you can increment and decrement but the value is changing it's the same pattern like let me quickly so let me quickly copy it from my demo so so this is some text for example when the value added with the value 1 and the value 2 and then so what exactly it's coming the same information you can add it to the fringe and the english as well i think i copied in the spanish way okay so yeah first let's print this and create a value one let me value one and value two there is another p tag the same inner html you can follow this structure exactly and here you can change to the value 1 and then you can use a comma and then value 2. so i'm going to give b and here it's a and go to the component i'm going to give a equal to 1 and b equal to 2. so if you look at this when the value one i added to value two i think it's a three maybe i gave a wrong tag so let's change it as a span yep that's it and for other things because i don't have a language by default it takes the default one so you can change the language the same way i added so you can go to that and you can change it make sure you remove the commas at the end so this should be a json format so mostly we make the mistakes and that's it for this demo and yeah if you look at everything not change and this is the furthest you have you'll find the demo on the github yeah thanks a lot thanks a lot for watching this video

Channel: Srinivas Tamada

Views: 5,177

Rating: 4.8481011 out of 5

Keywords: Srinivas Tamada, Angular, JavaScript, 9lessons, Multi language, Internationalization, localization

Id: iXU1V2_GOTs

Length: 24min 44sec (1484 seconds)

Published: Tue Oct 13 2020