leandrorangel94 / angular-traducao

Transformando meu site Angular em Multi-Idiomas

Desenvolvemos Sistemas, Sites, Apps, etc... Que ficam disponíveis na Internet e pessoas do Mundo Todo podem acessar nossa entrega, sem restrições de país. Por isso não seria melhor facilitar para que usuários que não estejam no Brasil ou não falem português como idioma Nativo possam usar nossos sistemas? Será que chegou a hora, de romper as barreiras do idioma na sua aplicação?

Por isso nesse vídeo, vou mostrar como transformar seu site, feito no Brasil por brasileiros em um site Multi-idiomas que pode ser utilizado por pessoas que não conheçam o seu idioma. Mas ainda possam usar seu Site ou Sistema, sem ficar tentando adivinhar o que está escrito ou ficar traduzindo tudo o que não entender.

Agora vamos ao passo a passo para seguir o Vídeo

Vou deixar para vocês os mesmos comandos que usarei no Vídeo.

1 - Baixando o Código

git clone https://github.com/rocketseat-experts-club/traduzindo-angular-2022-03-12.git

Verifique que você está na Branch main

2 - Executando o projeto que será traduzido

npm install
ng s

Depois de executar os 2 comandos, acesso o caminho gerado pelo Angular. Normalmente é esse:

http://localhost:4200/

3 - Criando a lista de Idiomas

Vamos agora criar a lista de Idiomas, que será usada para traduzir o sistema. Aqui vou usar HTML simples, para diferenciar do Bootstrap e facilitar para vocês a inclusão ou alteração de idiomas mesmo que vocês não conheçam Bootstrap.

No arquivo app.component.html incluir o código abaixo:

<label><b>Escolha o Idioma do Site:</b>&nbsp;</label>
<select  #listaIdiomas (change)="traduzirSite(listaIdiomas.value)" title="ListaIdiomas">
  <option value="pt" selected="selected">Português do Brasil</option>
  <option value="en">Inglês</option>  
</select>

No arquivo app.component.ts incluir o código abaixo:

traduzirSite(language: string): void {
    alert(language);
  }

4 - Instalando e configurando o pacote de Tradução

Esses são os códigos usados no vídeo, para instalar e configurar a aplicação:

npm install @ngx-translate/core@13.0.0

No arquivo src/app/app.module.ts incluir o código abaixo:

  import { TranslateModule } from '@ngx-translate/core';
  
	imports
		TranslateModule.forRoot()
  }

npm install @ngx-translate/http-loader@6.0.0

No arquivo src/app/app.module.ts incluir o código abaixo:

  import { HttpClientModule, HttpClient } from '@angular/common/http';
	import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
	import { TranslateHttpLoader } from '@ngx-translate/http-loader';
	
	// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

No arquivo src/app/app.component.ts incluir o código abaixo:

  constructor(private translate: TranslateService) {
    translate.setDefaultLang('pt');
  }
  
  traduzirSite(language: string): void {
    this.translate.use(language);
  }