הקבצים של אנגולר

<label>Enter English</label>
<input class="input" (input)="text=$event.target.value" />
<button class="button" (click)="submit()">Translate</button>

<h1>{{ TranslatedText }}</h1>

import { Component } from "@angular/core";
import { TranslateService } from "./translate.service";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  text: string;
  translatedText: any;

  constructor(private translateService: TranslateService) {}

  submit() {
    this.translateService.translate(this.text).subscribe((result) => {
      this.translatedText = result;
    });
  }
}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class TranslateService {
  url = 'https://translation.googleapis.com/language/translate/v2?key=AIzaSyCf0Xy0OnhxlduyEt3K8zP-sOuu-l_u6uA';

  constructor(private http: HttpClient) { }

  translate(text: string) {
    return this.http.post(this.url, {
      "q": text,
      "target": "es"
    }).pipe(
      map((res: any) => {
        return res.data.translations[0].translatedText;
      })
    );
  }
}