Up next in 10
Angular ngx-translate Example to Integrate Google Translate Module to Translate Web Page in Browser
23 views
Jun 13, 2025
Get the full source code of the application here: Official Website: https://freemediatools.com
View Video Transcript
0:02
uh hello guys welcome to this video so
0:04
in this video I will show you a angular
0:06
package which actually translate your
0:09
web pages from one language to another
0:11
so you can easily integrate the Google
0:13
translate feature inside your angular
0:15
application
0:17
so if you have a data inside your
0:20
website you can translate from English
0:23
French Spanish all the languages are
0:25
supported so this is a simple example
0:27
that we will build you will see we have
0:29
a simple hello message here so we have
0:33
two buttons English and French so if I
0:36
click the French button you will see
0:38
this all this data will be converted to
0:40
French language you will see all the
0:42
website again if I press this button you
0:45
will see it will convert to English so
0:47
in this easy way you can add more
0:48
languages as well
0:51
so the name of the module is if you just
0:54
go to npmjs.com just search for this
0:57
module which is ngx
0:59
translate
1:01
so this is the name of the module
1:08
so the command is simple you simply
1:10
execute this command npmi at the rate
1:13
ngx translate http loader it's almost
1:16
having 7,000
1:18
weekly downloads 700,000 weekly
1:20
downloads it's a pretty popular package
1:24
and they do offer their official
1:26
documentation as well how to get started
1:28
here so
1:31
basically you integrate the Google
1:33
translate functionality inside your
1:34
angular application so I will show this
1:37
simple example here the very first thing
1:40
you need to do you need to go to this
1:42
app domodule.ts file of your angular
1:45
project and here you just need to
1:47
register this module and for registering
1:50
it we add these bunch of import
1:52
statements so we import the translate
1:55
module translate loader from ngx
1:57
translate core and then we also need to
2:00
import the translate http loader from
2:02
ngx translate http loader and after that
2:05
go we need to go to the imports array
2:08
and simply translate module for root and
2:11
here we provide all this
2:16
so this is the first step after that we
2:19
need to go to the app do.component html
2:21
file and here we simply define the
2:25
actual data that you want to translate
2:28
so in this
2:31
so whatever thing that you want to add
2:33
here so we have this hello message so I
2:36
can add another paragraph here
2:47
so you just need to add this inside
2:50
double curly bracket and here you can
2:52
simply add another label
2:57
and you just need to pass this
3:00
flag here which is translate
3:06
so here you define the label here and
3:10
you just add this dash symbol and then
3:13
translate so now if you press you will
3:16
see it will translate everything so you
3:19
just need to make sure that you add this
3:22
after that you need to go to
3:24
app.component.ts
3:25
file
3:27
so here you by default we are
3:30
translating the English language so here
3:32
you define the string variable so
3:35
twoletter digit code for language so
3:37
English stands for en so if you want
3:41
this to be Spanish you will say es so
3:44
each and every language has a twolet
3:46
digit code so you just need to do this
3:49
and here inside this constructor
3:52
to the angular we just need to pass this
3:54
service
3:57
so this translate service which will be
3:59
coming from this module and then we just
4:01
need to start this
4:03
service here like this so this translate
4:06
service is coming from this module here
4:08
the core module after that the ng oninit
4:12
function so as soon as your angular
4:14
component starts we set the default
4:17
language to be English so this translate
4:19
dot set default language English and
4:22
then we also set the local as well
4:26
and right here in the initial translate
4:28
function so we are having different
4:31
languages so we are using a switch
4:33
statement so if you press the French one
4:36
the local will be set to French the
4:39
default one is English so as soon as you
4:41
click the French button you will see all
4:43
your website will be converted to French
4:46
so in this easy way you can add more
4:48
buttons as well for more languages this
4:51
is a straightaway module component you
4:54
may say inside Angular ng translate
4:57
which supports translating your web
4:59
pages from one language to another so
5:03
also check out my website
5:04
freemediattools.com
5:07
uh which contains thousands of tools and
5:10
I will be seeing you in the next video
#Programming
#Web Services