On Angular Site Would like to use google translate element

Radzen Studio Angular
1

I was trying to add the google translate element to my angular site.

The html is pretty simple but I am lost as to how or where to add it to an angular site.
I tried a bit with a custom component template but just doesn't seem to work.

<div id="google_translate_element"></div>
<script type="text/javascript"
		src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>
<script type="text/javascript">
	function googleTranslateElementInit() {
		new google.translate.TranslateElement(
			{pageLanguage: 'en'},
			'google_translate_element'
		);
	}
</script>

image

2

Hi @BillP,

You can add this code to client\src\index.html. You have to add that file to Radzen's code generation ignore list though.

3

I was able to create some test code on https://stackblitz.com ,
I attached my stackblitz angular project for anyone to access.

This worked using the script in the index.html and div and styling in an angular component. So I think I could create a custom angular component or just put it all in the index.html.

Here is what I did to test it out in angular on stackblitz
In Index.html

<html>
  <head>
    <title>My app</title>
  </head>
   <body>
     <my-app>Loading...</my-app>
    <script type="text/javascript">
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({pageLanguage: 'en' }, 'google_translate_element');
    }
    </script>
    
    <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
    
    <p>You can translate the content of this page by selecting a language in the select box.</p>
   </body>
  </html>

In a Component

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule],
  template: `
  <div class="gtrans" id="google_translate_element"></div>
  <h1>{{name}}!</h1>
     `,
  styles:['.gtrans {position:absolute;bottom:0; right:0;background-color: #dbdad9; border-radius: 5px; text-align:center;padding: 3px 3px 3px 3px;}']
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App);

Resulting Web Page
image
angular-pfg3tw.zip (7.6 KB)

4

Hey is google translate element is working fine ?

I mean If I'm on a any route except landing page and I click on the dropdown to change the language its just refreshing the page and redirecting me to landing page