Hey, have you ever wondered how
you can support multiple languages in your application and that to multiple
countries? We're going to see in this video. Hi everyone, this is Subrat, and you are
watching Fun Of Heuristic. So on this channel, we make videos like this which is related
to programming and web development. So please consider subscribing and hit the bell
icon, and don't forget to hit the like button. If you haven't yet, you must have wondered or
you must have tried to support your application to multiple languages and to multiple
countries. We say that as localization and internationalization. Just to simplify, what
it means is supporting your application with different languages to different countries. So
in countries, what it meant is like date format, different currencies, and all those things. To achieve localization and internationalization,
there might be two ways. One way is you ask your server to serve the data by translating it
according to your request. And in your request, you serve them the local. Here, 'Local' is your
combination of your languages and your country. So that's the one approach, and it's quite easy
from the front-end point of view. It makes sense if you have a bigger application which supports
a large amount of data and all. But if you have a small application and if you don't want to get all
your data from the server, all your data means all your fixed data which is not going to change, all
the static data which will be there on the site, then you can use this approach which
we're going to discuss in the video. For this, we'll use a package from
Angular, which is 'localized'. Before proceeding to the coding, I would
like to explain the difference between localized and internationalization. Think
like you want to support your application to various international locations. Some
countries have different date formats, some countries' currencies are different.
Supporting them is internationalization. Then you can localize them with different
languages. That's what localization means. To see that, I have created a small application
where we'll try to see how you can support different languages and also how we will support
RTL, which is right to left for those countries like Arabic countries and so on. So we'll go to
our application. So here, as you can see, I have a small application which is quite simple. It just
has a heading, input field, and a submit button. Before you start coding for your localization,
you have to take this thing in your mind that your application alignment will going to be
changed. It means right to left and left to right both need to be supported. So you
should not put any styling specific to left-aligned or specific to right-aligned. So
while adding styling, you need to think about that you are adding the styling for both
the variants. Here, the variant means one is right to left and one is left to right. So by
thinking that in mind, and once that is sorted, then you should think about what all can
be localized or internationalized here. In this particular example, what we
can internationalize or what we can localize for different languages
is this heading, this placeholder, and this button. If you have
some date and some currencies, that also can be done. But the good news here,
our date by default supports internationalization. First thing first, to have our
application internationalized, what Angular supports or how Angular deals
with it is you create different bundles for different locations. Suppose you want to serve
for the US, one bundle will be created for 'en-US'. Suppose I want to support it for RTL
language like Arabic, then one bundle will be created for 'AR' and 'A'. So why does Angular
do like that? Our user usually doesn't change the language that much. So doing it runtime will
be more expensive than doing it in build time. So what we'll do now is we will build
our application with various languages, and while serving, it will serve it from
different locations itself. Suppose you are supporting three languages, then you have three
instances of your application which will support three different languages, and you can route
your user respective to those applications. So keeping that in mind, first, we need to add
this 'NG add @angular/localize'. And once you add it, you can see that in your packages, and
you have a dev dependency of Angular localized. And notice here, it's a dev dependency, not
a dependency. Because as I told, we need the localization function or we need to translate
the file in our build time, not in our runtime. So once it has been added, we'll go to our
angular.json file. Here we need to add like this. And I forgot to say that internationalization is
famously known as 'i18n'. And we are seeing that our source locals. So what I meant by local is
this, your language code and your country code. So that's what a local means. And we are saying
our locals will be here 'ar-AE'. I am just showing you 'ar-AE' because I want to show you both the
languages. For English, it will be left to right, and for 'ar-AE', it will be right to left.
So both the conditions will be satisfied. And here, you can add multiple locals with
different language codes and different country codes, and that will also going to
work. So we'll just see here two languages, one is English and one is Arabic. What we
are saying here is our translation file should be put here, which we're going to
create. And we'll say that our base href will start with 'ar-AE'. Then you will
go to inside our architect and build and the options. So while building a project,
you need to put this. You're saying I will localize my project for 'ar-AE'. Similarly,
you can pass different locals here as well. So what it will do, while building your project, it will create different bundles for
different locals. So once that is done, now I'll go to our application and see what all
we can do to change the language. It's quite easy. So suppose I want to change this submit button.
So what I just need to do is I just need to add 'i18n' here. And it will say that okay,
my submit button has 'i18n' tag on it. So when we create our transition file, it will
pick this and try to give us a placeholder. Similarly, for placeholders, what we need to
do, so I'm just saying it for placeholder, it will act for any attributes.
Okay, so suppose for 'i18n', then you will just say placeholder. So why am I
saying any attribute? Suppose you have an image, and you want to put alt text or aria-label in
a different language because that's what makes sense. So if you're having aria-label
for an image, then you should put that in two different languages. So then in that
scenario, it will be 'i18n' alt text and so on. You might be wondering, if I just put 'i18n'
here, will that going to work? Because this is a variable, right? So how we're going to handle
it? You go to the TS file, and here where you are declaring your variable, there we just need
to put '$localized'. Now this will be grabbed by our localization function ID, and we'll get a
placeholder for that. So here, our work is done. So now we just need to extract all this 'i18n'
command and put our translation text in it. Okay, so for that, we have 'NG extract-i8n'. And we need to put our output path to source and
local. And when we press enter, it will create a message file or a translation file inside our
folder, which we have here. And if I go to our angular.json, here you might have noticed I
have done a mistake here. So instead of 'es', what you can write is 'AR'. It's just to specify
different translation files for different locals. So here, what you are saying is for our 'ar-AE'
local, our transaction file should be this. But if you go here and check, we don't have our
'messages.ar.xlf'. What we'll need to do here is we need to copy this file and rename this
according to our local. And in this scenario, our local is 'ar-AE'. So 'messages.ar.xlf',
our file is ready now to serve. So we'll just walk through once that what
is got generated here. So what we have here, all of your text like 'enter your
name', 'submit', 'hello how are you', which all we have given, 'submit',
'enter your name', and in our TS file, 'hello how are you'. And if you see here, we
have source as 'enter your name', and you have context group where it's showing the file which
is 'app component.html' and then line number. What you need to do now, if you
have a translator by yourself, you pass this transition file, so in this
scenario, our 'messages.ar.xlf' to your translator who can translate for you from
English to Arabic. But in this scenario, we'll do that. We just need to add one target. So
we'll add targets for all three of these, and I will just add the Arabic version of this English
from Google translator, and I will be back. So I have added all the targets for our source for
our Arabic file. Now we'll see how you're gonna use it. So just do 'NG serve'. So if you are doing
only one language, so suppose in angular.json, if you have only one localized, so this one will
be picked by your 'NG serve', and it will serve by default. If you'll go to our application now,
our application is with Arabic and with right to left. And if you try to go back to English,
then you will see we have left to right. RTL is by default supported by Angular. Similarly,
the dates, currency is by default supported. So now I am going to show you how I'm gonna
actually build it and while deploying it, what you should think in your mind. So
now we'll build our application. To build, you just need to add 'NG build' and 'localize'.
So what it will do, it will go to your localized array and try to grab all the possible locals you
have given, like 'ar-AE', 'es', 'pr' for India, for all other countries. It will try to generate
different bundles for you. And we're just going to see now, it will now create two bundles for
us, like one is 'en-US' and one is 'ar-AE'. So our build is completed. Now go to our
dist folder here. And here, as you can see, now we have two folders inside our application,
which is 'ar-AE' and 'en-US'. So to serve this and to see it in action, we'll go inside 'CD
dist' and we'll go inside 'angular length'. So I'm running HTTP server on port 4200. 4800,
I have opened these two languages side by side. So with one single code base now, we have
different languages and with different layouts. So you just saw how easy it is to localize and
internalize your application. And we saw that we can put different languages as well as different
layouts. Layout here is RTL and LTR. So our Angular locales package is helping us to achieve
all this with a few lines of code. Of course, you will need to have a translator who will
translate for you, or you yourself will going to translate all or English to different languages.
But apart from that, it's just a piece of cake. So if you liked what we have discussed till now
and if you are going to use it in your project, hit the like button so that it will
motivate me to make videos like this. Please do share this video among your
friends, family, colleagues so that they will also make their application to
internationalize them and localize them, and they will be famous. We're going to meet in
the next video. Till that, stay happy. Bye-bye.
