On Angular Site Would like to use google translate element

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"
<script type="text/javascript">
	function googleTranslateElementInit() {
		new google.translate.TranslateElement(
			{pageLanguage: 'en'},


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.

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

    <title>My app</title>
    <script type="text/javascript">
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({pageLanguage: 'en' }, 'google_translate_element');
    <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>

In a Component

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

  selector: 'my-app',
  standalone: true,
  imports: [CommonModule],
  template: `
  <div class="gtrans" id="google_translate_element"></div>
  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';


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