I18N - Home

package.json

@@ -30,6 +30,8 @@
     "@angular/platform-browser-dynamic": "~11.2.11",
     "@angular/router": "~11.2.11",
     "@datorama/akita": "^7.1.1",
+    "@ngx-translate/core": "^13.0.0",
+    "@ngx-translate/http-loader": "^6.0.0",
     "angular-responsive-carousel": "^2.0.2",
     "express": "^4.17.1",
     "moment": "^2.29.1",

src/app/app.component.ts

@@ -2,6 +2,8 @@ import { Component } from '@angular/core';
 import { MatIconRegistry } from '@angular/material/icon';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Icons } from './data/icons';
+import { I18nService } from './services/translation/i18n.service'
+
 
 @Component({
   selector: 'app-root',
@@ -14,8 +16,15 @@ export class AppComponent {
 
   constructor(
     private matIconRegistry: MatIconRegistry,
-    private sanitizer: DomSanitizer) {
+    private sanitizer: DomSanitizer,
+    private I18nService: I18nService) {
     this.registerIcons(sanitizer);
+
+  }
+
+  ngOnInit(): void {
+    const defaultLanguage = 'pt';
+    this.I18nService.loadRouteTranslations(defaultLanguage);
   }
 
   registerIcons(sanitizer: DomSanitizer): void {

src/app/app.module.ts

@@ -1,5 +1,5 @@
 import { ViewportScroller } from '@angular/common';
-import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, HttpClientModule, HttpClient } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -113,6 +113,12 @@ import { TechComponent } from './modules/pages/tech/tech.component';
 import { AuthInterceptor } from './services/interceptor';
 import { AggregateStateFilterComponent } from './modules/pages/aggregate/filters/state-filter/aggregate-state-filter.component';
 import { AggregateCityFilterComponent } from './modules/pages/aggregate/filters/city-filter/aggregate-city-filter.component';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+
+export function HttpLoaderFactory(http: HttpClient) {
+  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
+}
 
 /* custom directives */
 @NgModule({
@@ -226,6 +232,7 @@ import { AggregateCityFilterComponent } from './modules/pages/aggregate/filters/
     IvyCarouselModule,
     NgxPaginationModule,
     NgxMaskModule.forRoot(),
+    TranslateModule.forRoot()
   ],
   providers: [
     { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },

src/app/modules/components/date-picker-range/date-picker-range.component.html

@@ -4,7 +4,7 @@
     md-hide-icons="calendar"
     #picker
   ></mat-date-range-picker>
-  <mat-label>Período</mat-label>
+  <mat-label>{{ 'search.placeholderDateRange' | translate }}</mat-label>
   <mat-date-range-input [formGroup]="range" [rangePicker]="picker" [max]="maxDate">
     <input matStartDate formControlName="start" placeholder="Início" />
     <input

src/app/modules/components/footer/footer.component.html

@@ -1,6 +1,6 @@
-<app-container *ngIf="navigation$ as content" [gap]="86">
+<app-container  [gap]="86">
   <app-row wrap="wrap" layoutAlign="space-between">
-    <ng-container *ngFor="let section of content | async">
+    <ng-container *ngFor="let section of 'footer.items' | translate">
       <app-column [gap]="12" class="footer-links">
         <span
           ><p class="links-title">{{ section.title }}</p></span
@@ -22,7 +22,7 @@
     <app-column fxHide.xs *ngIf="social$ | async as social">
       <app-column [gap]="12">
         <span>
-          <p>{{ social.title }}</p>
+          <p>{{ 'footer.social.title' | translate }}</p>
         </span>
         <app-row>
           <ng-container *ngFor="let icon of social.icons">
@@ -35,7 +35,7 @@
   <app-row class="social-row" fxHide fxHide.xs="false" *ngIf="social$ | async as social">
     <app-column [gap]="12">
       <span>
-        <p>{{ social.title }}</p>
+        <p>{{ 'footer.social.title' | translate }}</p>
       </span>
       <app-row class="social-icons-row">
         <ng-container *ngFor="let icon of social.icons">
@@ -51,7 +51,7 @@
       </ng-container>
     </app-row>
     <app-column>
-      <ng-container *ngFor="let text of copyright.texts">
+      <ng-container *ngFor="let text of 'footer.copyright.texts' | translate">
         <div [innerHTML]="text" class="highlight copyright"></div>
       </ng-container>
     </app-column>

src/app/modules/components/header/header.component.html

@@ -3,16 +3,39 @@
     <div class="container">
       <a routerLink="/"><mat-icon svgIcon="logo" class="logo"></mat-icon></a>
       <nav fxHide.xs fxLayoutGap="32px" *ngIf="!hideMenu">
-        <a routerLink="/" #explore>Explore</a>
-        <a routerLink="/dados">Dados</a>
-        <a routerLink="/blog">Blog</a>
-        <a routerLink="/tecnologia">Tecnologia</a>     
-        <a routerLink="/sobre">Sobre</a>
+        <ng-container *ngFor="let item of 'header.items' | translate; let i = index">
+           <a 
+            *ngIf="i === 0; else regularLink" 
+            routerLink="{{ item.route }}" 
+            #explore>
+            {{ item.text }}
+          </a>
+          <ng-template #regularLink>
+            <a routerLink="{{ item.route }}">
+              {{ item.text }}
+            </a>
+          </ng-template>
+        </ng-container>
+
         <a fxLayout="center" (click)="openNotifications()">
           <app-icon [icon]="notificationIcon"></app-icon>
         </a>
-        <button routerLink="/apoie" class="btn">Apoie</button>
-        <button routerLink="/educacao" class="btn-purple">Educação</button>
+        <button routerLink="/apoie" class="btn">{{ 'header.buttons.support' | translate }}</button>
+        <button routerLink="/educacao" class="btn-purple">{{ 'header.buttons.education' | translate }}</button>
+
+        <button mat-icon-button [matMenuTriggerFor]="languageSwitcher" aria-label="Seletor de idioma" class="top-header-menu-item">
+          <mat-icon>language</mat-icon>
+        </button>
+        <mat-menu #languageSwitcher="matMenu" xPosition="before" class="language-switcher-menu">
+          <ng-container *ngFor="let language of languageList">
+            <a target="_self" (click)="changeLanguage(language.code)">
+              <button mat-menu-item [attr.data-language-code]="language.code">
+                <span>{{language.label}}</span>
+              </button>
+            </a>
+          </ng-container>
+        </mat-menu>
+
       </nav>
       <a *ngIf="!hideMenu" (click)="openDialog()" id="support" fxHide fxHide.xs="false">
         <mat-icon svgIcon="bars" class="bars"></mat-icon>
@@ -25,32 +48,47 @@
 
 
 <div class="suspended-menu" *ngIf="mobileMenuOpen" (click)="onClickLink()">
-  <a routerLink="/" #explore><div class="link bg-white">
-    Explore
-  </div></a>
-  <a routerLink="/dados"><div class="link bg-white">
-    Dados
-  </div></a>
-  <a routerLink="/blog"><div class="link bg-white">
-    Blog
-  </div></a>
-  <a routerLink="/tecnologia"><div class="link bg-white">
-    Tecnologia
-  </div></a>
-  <a routerLink="/sobre"><div class="link bg-white">
-    Sobre 
-  </div></a>
-  <a routerLink="/apoie"><div class="link bg-orange">
-    Apoie
-  </div></a>
+  <a routerLink="/" #explore>
+    <div class="link bg-white">
+      Explore
+    </div>
+  </a>
+  <a routerLink="/dados">
+    <div class="link bg-white">
+      Dados
+    </div>
+  </a>
+  <a routerLink="/blog">
+    <div class="link bg-white">
+      Blog
+    </div>
+  </a>
+  <a routerLink="/tecnologia">
+    <div class="link bg-white">
+      Tecnologia
+    </div>
+  </a>
+  <a routerLink="/sobre">
+    <div class="link bg-white">
+      Sobre 
+    </div>
+  </a>
+  <a routerLink="/apoie">
+    <div class="link bg-orange">
+      Apoie
+    </div>
+  </a>
 
-  <a routerLink="/educacao/"><div class="link divider bg-purple">Tecnologias na Educação</div></a>
+  <a routerLink="/educacao/">
+    <div class="link divider bg-purple">Tecnologias na Educação</div>
+  </a>
   <div *ngIf="userData.full_name" class="user-name link">
     Olá, {{userData.full_name.split(' ')[0]}}
   </div>
   <a *ngIf="userData.full_name" routerLink="/educacao/alertas"><div class="link logged-link bg-dark-purple">
     Meus alertas 
-  </div></a>
+  </div>
+  </a>
   <a *ngIf="userData.full_name"><div (click)="onClickLogout()" class="link logged-link bg-dark-purple">
     Logout 
   </div></a>

src/app/modules/components/header/header.component.sass

@@ -17,14 +17,8 @@ header
   nav 
     display: flex
 
-  a 
-    color: #5e3f8e
-    font-family: Lato
-    font-size: rem(16)
-    font-weight: 600
-    letter-spacing: 0
-    line-height: rem(28)
-    align-self: center
+  a, .top-header-menu-item
+    @apply self-center font-lato text-[#5e3f8e] font-semibold text-base tracking-normal leading-7
 
   button.btn 
     height: rem(42)

src/app/modules/components/header/header.component.ts

@@ -8,6 +8,7 @@ import { ContentService } from 'src/app/services/content/content.service';
 import { UserQuery } from 'src/app/stores/user/user.query';
 import { UserService } from 'src/app/stores/user/user.service';
 import { tokenKeys } from '../../pages/area-education/utils';
+import { I18nService } from 'src/app/services/translation/i18n.service'
 
 @Component({
   selector: 'app-header',
@@ -20,13 +21,18 @@ export class HeaderComponent implements OnInit {
   userData: UserModel = {};
   urlsHide = ['/educacao/cadastrar'];
   hideMenu = false;
+  languageList = [
+    { code: 'pt', label: 'Português (BR)' },
+    { code: 'en', label: 'English (US)' }
+  ];
 
   constructor(
     private userQuery: UserQuery,
     private modal: MatDialog,
     private contentService: ContentService,
     private userService: UserService,
     private router: Router,
+    private I18nService: I18nService,
   ) {}
 
   notificationIcon: IconType = {
@@ -93,4 +99,9 @@ export class HeaderComponent implements OnInit {
       },
     });
   }
+
+
+  changeLanguage(language: string): void {
+    this.I18nService.loadRouteTranslations(language);
+  }
 }

src/app/modules/components/infos/infos.component.html

@@ -1,12 +1,12 @@
 <ng-container *ngIf="infos$ | async as infos">
   <div class="container-inner">
-    <h1>{{ infos.title }}</h1>
+    <h1>{{ 'infos.title' | translate }}</h1>
   </div>
   <app-row [gap]="17" [flex]="true">
     <app-column
       [ngClass]="page === 'about' ? 'info-item' : ''"
       [style.padding]="'42px 30px'"
-      *ngFor="let item of infos.items"
+      *ngFor="let item of 'infos.items' | translate"
       [gap]="34"
       [theme]="themeCard"
     >

src/app/modules/components/search-form/search-form.component.html

@@ -2,7 +2,7 @@
   <app-row>
     <mat-form-field appearance="fill" class="search-input">
       <mat-icon matPrefix svgIcon="search-gray"></mat-icon>
-      <mat-label>Ex.: licitação, contratação, COVID 19</mat-label>
+      <mat-label>{{ 'search.placeholderSearch' | translate }}</mat-label>
       <input
         class="search"
         #termField
@@ -47,7 +47,7 @@
     <edu-city-filter
       [initialValue]="territory" 
       [loadingCities]="loadingCities"
-      label="Município" 
+      label="{{ 'search.placeholderLocation' | translate }}" 
       class="city-input" 
       [cities]="getCityList()"
       [showCityLevel]="true"
@@ -61,5 +61,5 @@
       class="period-input"
     ></app-date-picker-range>
   </app-row>
-  <button (click)="search()" class="btn">Pesquisar</button>
+  <button (click)="search()" class="btn">{{ 'search.button' | translate }}</button>
 </form>

src/app/modules/pages/home/home.component.html

@@ -8,16 +8,16 @@
     <app-container theme="light">
       <div class="container-inner form-search-container">
         <h1>
-          {{ content.explore.title }}
+          {{ 'explore.title' | translate }}
         </h1>
         <app-search-form></app-search-form>
       </div>
     </app-container>
 
     <app-container [gap]="34">
-      <h1>{{ content.evolution.title }}</h1>
+      <h1>{{ 'evolution.title' | translate }}</h1>
       <app-row layoutAlign="space-between" [flex]="true" [gap]="30">
-        <app-column *ngFor="let item of content.evolution.items">
+        <app-column *ngFor="let item of 'evolution.items' | translate">
           <app-row
             [gap]="24"
             layoutAlign="left"
@@ -30,7 +30,7 @@ <h1>{{ content.evolution.title }}</h1>
           </app-row>
         </app-column>
       </app-row>
-      <ng-container *ngFor="let action of content.evolution.actions">
+      <ng-container *ngFor="let action of 'evolution.actions' | translate">
         <app-row class="evolution-link" [gap]="6">
           <a [routerLink]="action.to">
             {{ action.text }}
@@ -46,8 +46,8 @@ <h1>{{ content.evolution.title }}</h1>
 
     <app-container theme="light" id="casos" [gap]="34" *ngIf="content$ | async as content; else loading">
       <div class="container-inner stories-area-title">
-        <h1>{{ content.useCases.title }}</h1>
-        <p>{{ content.useCases.text }}</p>
+        <h1>{{ 'useCases.title' | translate }}</h1>
+        <p>{{ 'useCases.text' | translate }}</p>
       </div>
       <app-row [gap]="17" wrap="wrap" [flex]="true">
         <div class="stories-overflow">
@@ -57,12 +57,12 @@ <h1>{{ content.useCases.title }}</h1>
     </app-container>
 
     <app-container  bg="bg-purple-square-blurred" [gap]="34" theme="dark-tertiary">
-      <h1>{{ content.help.title }}</h1>
+      <h1>{{ 'help.title' | translate }}</h1>
       <app-row layoutAlign="space-between" [flex]="true" [gap]="60">
         <app-column
           [appWidth]="380"
           fxFill.xs
-          *ngFor="let item of content.help.items"
+          *ngFor="let item of 'help.items' | translate"
         >
           <app-column [gap]="24" [flex]="true">
             <app-icon [icon]="item.icon"></app-icon>
@@ -99,7 +99,7 @@ <h3>{{ item.title }}</h3>
 
     <app-container theme="light" id="midia" [gap]="34" *ngIf="content$ | async as content; else loading">
       <div class="container-inner stories-area-title">
-        <h1>{{ content.mediaImpact.title }}</h1>
+        <h1>{{ 'mediaImpact.title' | translate }}</h1>
       </div>
       <app-row [gap]="17" wrap="wrap" [flex]="true">
         <div class="stories-overflow">
@@ -114,7 +114,7 @@ <h1>{{ content.mediaImpact.title }}</h1>
 
     <app-container theme="light">
       <app-row [gap]="70" [gapXs]="16" [flex]="true">
-        <ng-container *ngFor="let item of content.realization">
+        <ng-container *ngFor="let item of 'realization' | translate">
           <app-column [gap]="14">
             <p>{{ item.title }}</p>
             <app-row wrap="wrap" [gap]="14">