How to implement google auto translate in angular application avoiding the creation of scripts tags in the dom?

user_7265505 0
Viewed 6196

I m looking for a way to reuse the 2 scripts provided by google translate to implement the auto translation in an angular application without injecting them in the dom. Like a way to convert them to internal function in my component.

I m taling about the 2 scripts + the hidden div element :

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" defer=""></script>


<script type="text/javascript">
                     function googleTranslateElementInit() {
                     new google.translate.TranslateElement(
                     {
                       pageLanguage: 'ko',
                       includedLanguages: 'en',
                       layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT,
                       autoDisplay: false
                     },
                     'google_translate_element');}</script>



<div class="hidden" id="google_translate_element"></div>
language-translation angular-components angular typescript google-translate
2 Answers

Instead

//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit

You should

https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit

You missed https: thats why its not working

user_82051170

If you are in an Angular CLI project (an Angular project with command line access) you can use Node (npm commands) to install the Google Translate API. You can then follow this https://www.npmjs.com/package/google-translate. It will show you which functions to use without having to create multiple elements. I am not sure if this answers your question exactly but I hope it helps.

user_130064880
Related