How To Implement Google Translator In Angular Application

Google translate is a web-based free service for end users, which convert multiple languages to the different language, so the maximum company or persons use google translate service in its website and web application. It supports more than 100 languages so that maximum users can use the service of google translator.

    Implementation of google translator in an angular application: -

   google translator also provides support in the angular application, it converts any project language to the desired language when that particular page open. 

   the code part for template section is given below, this code part will be implemented where google translator should be shown.

    <div id="google_translate_element" style="position: absolute; z-index: 10000; right: 0"></div>
 

 the preferred choice of google translator is the top right position, and it just looks like a drop-down. when we open this drop-down then multiple language names are shown, after selecting any language that corresponding page will be converted to the desired language. a user can also change their language at any time.

      the code part for a component section is given below, this part can be implemented in any js or ts file.

                <script type="text/javascript">
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({ pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE }, 'google_translate_element');
    }
  </script>
        

Default parameter in google translator: - in google translator, some default parameter is also used, this parameter is used to set any webpage language in default condition(when any page first time load).

  1) Page Language: - this parameter is used to set the default language for our web application, some example are given below; -

         a) if (pageLanguage: 'en') then default language will be English in google translator dropdown.

         b) if (pageLanguage: 'fr') then default language will be French in google translate dropdown.

 2) Layout: - this parameter is used to set default layout.

       Example - if (layout: google.translate.TranslateElement.InlineLayout.SIMPLE) is selected, then inlinelayout will be simple in this condition.