wanna use google translate api to make my page different langueges but dunno excactly how | TypeScript Community | Page 1

austere helm Mar 19, 2024, 9:59 AM

#

have a vid for reference but in js and dunno how to implement it to ts

#

https://www.youtube.com/watch?v=JNA1VXuyIyc

YouTube

Coding 4 Bread

Google Translate API - Adding Multiple Language Translation Feature...

This video demonstrates how to use the Google Translate API to quickly and easily translate text between different languages. It explains the basics of the API and shows how to set it up in a few simple steps. It also covers how to use the API to translate text from one language to another, how to detect the source language, and how to format th...

▶ Play video

#

#

so should look something like this

heavy lagoon Mar 19, 2024, 10:36 AM

#

He says, dat this in je header moet

<div id="google_translate_element"></div>

And dit needs to zijn aan het end..?

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

#

#

And, it appears to work

#

Put the translate element in a component that will always be visible ( like probably what you picked, the navigation )

#

You can use any element, and id/classname for it, as long as you change to code accordingly.

#

function googleTranslateElementInit() {
  new google.translate.TranslateElement(
    { pageLanguage: "en" },
     "google_translate_element" // <-- this one here
  );
}

#

The 3rd thing should probably be loaded in your head already.

#

so this one, in the main index.html, or whatever file it is 🙂

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

austere helm Mar 19, 2024, 10:49 AM

#

but i don t have js using ts im kinda confused 😅

austere helm Mar 19, 2024, 10:50 AM

#

austere helm

cuz like it needs to be ts right can use js in there?

#

@heavy lagoon

heavy lagoon Mar 19, 2024, 10:54 AM

#

TS === JS 🙂

#

The element itself can be placed anywhere, you might need to place the script (the script tag), before the function hits the page.

austere helm Mar 19, 2024, 10:57 AM

#

#

heavy lagoon Mar 19, 2024, 10:58 AM

#

if you remove function , it should work

#

cause you're in a class there

austere helm Mar 19, 2024, 10:58 AM

#

#

so sort of npm install?

heavy lagoon Mar 19, 2024, 10:58 AM

#

yeah, just put a // @ts-expect-error

#

no, google is loaded from the external file

austere helm Mar 19, 2024, 10:59 AM

#

heavy lagoon yeah, just put a `// @ts-expect-error`

where so don t understand only feel confident in java and python lol

heavy lagoon Mar 19, 2024, 11:00 AM

#

ah, right above that function

#

function googleTranslateElementInit() {
// @ts-expect-error
  new google.translate.TranslateElement(
    { pageLanguage: "en" },
     "google_translate_element" // <-- this one here
  );
}

#

or maybe 1 line below

#

^

austere helm Mar 19, 2024, 11:01 AM

#

heavy lagoon Mar 19, 2024, 11:01 AM

#

yay

#

you can remove my other comment 😛 ( // <-- this one here )

austere helm Mar 19, 2024, 11:02 AM

#

heavy lagoon you can remove my other comment 😛 ( // <-- this one here )

yeah i know XD

heavy lagoon Mar 19, 2024, 11:02 AM

#

:p

austere helm Mar 19, 2024, 11:02 AM

#

now i need to show it when ng serve is on

heavy lagoon Mar 19, 2024, 11:02 AM

#

Does an angular project not have just an index.html ?

austere helm Mar 19, 2024, 11:03 AM

#

heavy lagoon Does an angular project not have just an index.html ?

noop is a webshop but my backend is broken rn asswell XD

heavy lagoon Mar 19, 2024, 11:03 AM

#

kk

austere helm Mar 19, 2024, 11:03 AM

#

lol without the comment it gives an error with it not

heavy lagoon Mar 19, 2024, 11:03 AM

#

Yeah, that's the point of the comment 😛

#

ts-expect-error, so if there IS an error, it will silence it

austere helm Mar 19, 2024, 11:04 AM

#

but shouldn t the error be fixed thonk

heavy lagoon Mar 19, 2024, 11:04 AM

#

Not in this case

#

Normally, yeah

#

Also, look

#

If there's NOT an error, the comment itself will error

#

;D

austere helm Mar 19, 2024, 11:05 AM

#

heavy lagoon If there's NOT an error, the comment itself will error

annoying injectables lol

heavy lagoon Mar 19, 2024, 11:05 AM

#

Yeah, well it's really good in a lot of cases

austere helm Mar 19, 2024, 11:06 AM

#

now need it to display

heavy lagoon Mar 19, 2024, 11:06 AM

#

Yeah, it might not be allowed in those classes

#

Aren't there JS/TS files ? (not component.ts)

austere helm Mar 19, 2024, 11:07 AM

#

i got service files

#

heavy lagoon Mar 19, 2024, 11:08 AM

#

show me your project structure perhaps

austere helm Mar 19, 2024, 11:08 AM

#

heavy lagoon show me your project structure perhaps

can also sent src in zip if you want that

heavy lagoon Mar 19, 2024, 11:08 AM

#

yeah that would work

#

we can also gewoon nederlands praten

#

of needen we then PM'en

austere helm Mar 19, 2024, 11:09 AM

#

heavy lagoon of needen we then PM'en

i don t mind but then it needs to be private maybe a bit easier for technological terms

#

📎 src.zip

heavy lagoon Mar 19, 2024, 11:10 AM

#

er is gewoon een index.html 🤦🏻‍♂️

#

😄

austere helm Mar 19, 2024, 11:10 AM

#

die staat onderaan klopt

heavy lagoon Mar 19, 2024, 11:12 AM

#

yeah

#

probeer dit

#

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>INFIRFS - Webshop</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

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

</html>

#

Opzich zou deze overal moeten kunnen..

<div id="google_translate_element"></div>

#

Mocht het niet lukken in een van die components, probeer dan ook ff in de index.html, gewoon net boven/onder <app-root> element

austere helm Mar 19, 2024, 11:14 AM

#

is app-root nog belangrijk?

heavy lagoon Mar 19, 2024, 11:15 AM

#

Ja, dat is waar de hele zooi op "mount"

#

oh, en je moet er geen 2 maken denk ik

#

;D

austere helm Mar 19, 2024, 11:15 AM

#

heavy lagoon oh, en je moet er geen 2 maken denk ik

oh lm dacht dat hij weg was

heavy lagoon Mar 19, 2024, 11:15 AM

#

xD

#

Dat zou, in theorie, gewoon moeten werken

austere helm Mar 19, 2024, 11:16 AM

#

en dit kan ik dan gewoon weghalen neem ik aan en wat moet ik doen met het id?

heavy lagoon Mar 19, 2024, 11:16 AM

#

Ja, haal die maar weer weg

#

behalve dus dat ene elementje

austere helm Mar 19, 2024, 11:17 AM

#

heavy lagoon behalve dus dat ene elementje

<li id="gooogle_translate_element"></li> dit is het elementje?

heavy lagoon Mar 19, 2024, 11:18 AM

#

Yes

#

Die moet je plaatsen waar je die knop wilt hebben

#

Dus bv, in de navigatie inddd

austere helm Mar 19, 2024, 11:19 AM

#

in theorie zou er nu al wat moet verschijnen hoef geen tekstveld etc aan te geven in html toch?

#

heavy lagoon Mar 19, 2024, 11:21 AM

#

yeah

#

doe eens de console openen dan in de browser

austere helm Mar 19, 2024, 11:22 AM

#

heavy lagoon Mar 19, 2024, 11:23 AM

#

hm m

austere helm Mar 19, 2024, 11:25 AM

#

denk dat hij verbinding niet maakt maar geen flauw idee thonk

heavy lagoon Mar 19, 2024, 11:25 AM

#

hmmhm

#

Check

#

#

Heb n angular project aangemaakt, werkt meteen

austere helm Mar 19, 2024, 11:28 AM

#

heavy lagoon Heb n angular project aangemaakt, werkt meteen

oh oh de het werkt op mijn scherm🙆‍♂️

heavy lagoon Mar 19, 2024, 11:28 AM

#

ahahah

#

"Bij mij doet 'ie het gewoon"

#

ahah

austere helm Mar 19, 2024, 11:29 AM

#

import { Component, OnInit } from '@angular/core';
import { RouterModule } from '@angular/router';

import { CartService } from '../services/cart.service';
import { Product } from '../models/product.model';

@Component({
  selector: 'app-navigation',
  standalone: true,
  imports: [RouterModule],
  templateUrl: './navigation.component.html',
  styleUrl: './navigation.component.scss'
})
export class NavigationComponent implements OnInit {
  public title: string = 'INFIRFS - Webshop';

  public amountOfProducts: number = 0;

  constructor(private cartService: CartService) { }

  ngOnInit() {
    this.cartService.$productInCart.subscribe((products: Product[]) => {
      this.amountOfProducts = products.length;
    })
  }

   googleTranslateElementInit() {
    // @ts-expect-error
      new google.translate.TranslateElement(
        { pageLanguage: "en" },
         "google_translate_element"
      );
    }
}

heavy lagoon Mar 19, 2024, 11:29 AM

#

right, die googleTranslateElementInit werkt dar niet denk ik

#

wellicht mag het toch ook niet een li element zijn, verander die eens terug naar een div

#

en gewoon in de index.html zou de rest moeten kunnen

#

#

ala zo

austere helm Mar 19, 2024, 11:32 AM

#

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>INFIRFS - Webshop</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

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

</body>

</html>

#

index.html

#

dat is toch hetzelfde?

#

dus dit in nacigation.html

#

index.html

#

navigation.component

heavy lagoon Mar 19, 2024, 11:36 AM

#

hm ja

#

en als je die div plaatst in index?

#

of laad alleen app-root element

austere helm Mar 19, 2024, 11:37 AM

#

heavy lagoon en als je die div plaatst in index?

gebeurd ook niks

austere helm Mar 19, 2024, 11:37 AM

#

heavy lagoon of laad alleen `app-root` element

zou kunnen geen idee

heavy lagoon Mar 19, 2024, 11:37 AM

#

nee dat kan zo te zien kloppen

#

bij mij ook niet

austere helm Mar 19, 2024, 11:38 AM

#

🤷‍♂️

heavy lagoon Mar 19, 2024, 11:39 AM

#

ga eens naar de app-root component

austere helm Mar 19, 2024, 11:39 AM

#

heavy lagoon Mar 19, 2024, 11:39 AM

#

ik denk ./app/app.component'

austere helm Mar 19, 2024, 11:40 AM

#

deze?

heavy lagoon Mar 19, 2024, 11:40 AM

#

ja, dan de html denk ik

#

app.component.html

austere helm Mar 19, 2024, 11:41 AM

#

heavy lagoon Mar 19, 2024, 11:41 AM

#

ziet er zo uit ong ```html
<app-navigation></app-navigation>
<div class="container">
<h1>pckenner</h1>
<div id="google_translate_element"></div>
<router-outlet></router-outlet>
</div>

#

yeah

#

klap hem daar eens in

#

zoals ik net gedaan heb

austere helm Mar 19, 2024, 11:43 AM

#

#

heb wel goog translate daar maar dat is default?

heavy lagoon Mar 19, 2024, 11:46 AM

#

xD

austere helm Mar 19, 2024, 11:46 AM

#

nee it weet het oprecht niet

heavy lagoon Mar 19, 2024, 11:46 AM

#

ja

#

moet je het ook elke keer compilen dan

#

of is het live-update

austere helm Mar 19, 2024, 11:47 AM

#

heavy lagoon moet je het ook elke keer compilen dan

dat is niet echt het doel van angular ig

heavy lagoon Mar 19, 2024, 11:47 AM

#

hoe run je die localhost dan

austere helm Mar 19, 2024, 11:47 AM

#

dus hier moet ergens een fout in zitten ig

austere helm Mar 19, 2024, 11:48 AM

#

heavy lagoon hoe run je die localhost dan

ng serve

heavy lagoon Mar 19, 2024, 11:48 AM

#

ok

#

ik zag geen package.json in je zip

austere helm Mar 19, 2024, 11:48 AM

#

heavy lagoon ik zag geen package.json in je zip

is alleen src staat erbuiten anders te groot

heavy lagoon Mar 19, 2024, 11:49 AM

#

kk

austere helm Mar 19, 2024, 11:50 AM

#

heb geen flauw idee wat er verkeerd is mara hoop het te fixen zodat het project weer een beetje clean is😅

heavy lagoon Mar 19, 2024, 11:51 AM

#

ja

#

maar iedereen kan toch native google translaten ook

#

op pc/telefoon etc

austere helm Mar 19, 2024, 11:52 AM

#

heavy lagoon op pc/telefoon etc

ze willen het er gewoon in hebben 🤷‍♂️

heavy lagoon Mar 19, 2024, 11:52 AM

#

lol

#

ah het is niet je eigen ding zeg maar 😛

austere helm Mar 19, 2024, 11:52 AM

#

heavy lagoon ah het is niet je eigen ding zeg maar 😛

het is een schoolproject waar ik aan d bepaalde requierements moet voldoen

heavy lagoon Mar 19, 2024, 11:52 AM

#

ah echt

austere helm Mar 19, 2024, 11:53 AM

#

heavy lagoon ah echt

?

heavy lagoon Mar 19, 2024, 11:53 AM

#

¿

austere helm Mar 19, 2024, 11:53 AM

#

snap je niet

heavy lagoon Mar 19, 2024, 11:53 AM

#

ik snap mezelf soms ook niet, scheelt dat weer

austere helm Mar 19, 2024, 11:54 AM

#

heb alleen geen flauw idde waar de fout zit kan alles trg draaien ig maar moet och gebeuren was te lui om een repo aan te maken

heavy lagoon Mar 19, 2024, 11:55 AM

#

vscode gebruik je ?

austere helm Mar 19, 2024, 11:56 AM

#

yep webstorm is meh

heavy lagoon Mar 19, 2024, 11:56 AM

#

F1 -> initialize git repo

#

;D

#

of Ctrl+Shift+P w/e

austere helm Mar 19, 2024, 11:59 AM

#

done

heavy lagoon Mar 19, 2024, 11:59 AM

#

;D

austere helm Mar 19, 2024, 12:00 PM

#

wil die shitt nog wel fixen wnat wordt echt gek hiervan

heavy lagoon Mar 19, 2024, 12:02 PM

#

als je je repo up hebt, stuur ff linkje

#

en anders gooi dit dicht dan doe je maar pm'en

austere helm Mar 19, 2024, 12:02 PM

#

heavy lagoon als je je repo up hebt, stuur ff linkje

het is private want op de school zijn servers

heavy lagoon Mar 19, 2024, 12:02 PM

#

ohke

austere helm Mar 19, 2024, 12:03 PM

#

wil het eigenlijk hierm ee connecten maar doet niks met ssh heb een zware overload error lol

#

hij is nergens mee verbonden

heavy lagoon Mar 19, 2024, 12:08 PM

#

?

austere helm Mar 19, 2024, 12:09 PM

#

wil het daarmee verbinden maar git heeft nu geen verbinding met een sitre dus vrij waardeloos

#wanna use google translate api to make my page different langueges but dunno excactly how