#1 enable ngx-translate

src/app/app.component.ts

@@ -1,10 +1,18 @@
 import { Component } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'alfio-public-frontend';
+  constructor(translate: TranslateService) {
+    translate.setDefaultLang('en');
+    translate.use('en');
+
+    translate.onLangChange.subscribe(langChange => {
+      document.getElementsByTagName("html")[0].setAttribute('lang', langChange.lang);
+    });
+  }
 }

src/app/app.module.ts

@@ -6,18 +6,28 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { EventListComponent } from './event-list/event-list.component';
 import { EventDisplayComponent } from './event-display/event-display.component';
-import { HttpClientModule, HttpClientXsrfModule }    from '@angular/common/http';
+import { HttpClientModule, HttpClientXsrfModule, HttpClient }    from '@angular/common/http';
 
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faInfoCircle, faGift, faTicketAlt } from '@fortawesome/free-solid-svg-icons'
 import { faCalendarAlt, faCalendarPlus, faCalendarCheck, faCompass, faClock } from '@fortawesome/free-regular-svg-icons';
+import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
+import {TranslateHttpLoader} from '@ngx-translate/http-loader';
+
 import { BookingComponent } from './reservation/booking/booking.component';
 import { OverviewComponent } from './reservation/overview/overview.component';
 import { SuccessComponent } from './reservation/success/success.component';
 import { ReservationComponent } from './reservation/reservation.component';
 import { EventHeaderComponent } from './event-header/event-header.component';
 
+
+
+// AoT requires an exported function for factories
+export function HttpLoaderFactory(http: HttpClient) {
+  return new TranslateHttpLoader(http, '/api/v2/public/i18n/', '');
+}
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -39,7 +49,14 @@ import { EventHeaderComponent } from './event-header/event-header.component';
     }),
     FontAwesomeModule,
     FormsModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    TranslateModule.forRoot({
+      loader: {
+          provide: TranslateLoader,
+          useFactory: HttpLoaderFactory,
+          deps: [HttpClient]
+      }
+  })
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/event-display/event-display.component.html

@@ -5,8 +5,8 @@
 
     <div class="row">
         <div class="col-md-7">
-          <h2>Event informations</h2>
-          <div>Organized by {{event.organizationName}} &lt;<a [href]="'mailto:'+ event.organizationEmail">{{event.organizationEmail}}</a>&gt;</div>
+          <h2 translate="ticket.event-info"></h2>
+          <div>{{'show-event.by'|translate}} <strong>{{event.organizationName}}</strong> &lt;<a [href]="'mailto:'+ event.organizationEmail">{{event.organizationEmail}}</a>&gt;</div>
         </div>
         <div class="col-md-5"><img [src]="event.locationDescriptor.mapUrl" class="img-responsive"></div>
     </div>

src/app/event-header/event-header.component.html

@@ -1,7 +1,7 @@
 <div class="row">
   <div *ngIf="event.contentLanguages.length > 1" class="col-12 text-right">
     <ul class="language-selector">
-      <li *ngFor="let lang of event.contentLanguages">{{lang.language}}</li>
+      <li *ngFor="let lang of event.contentLanguages"><button [lang]="lang.language" (click)="changeLanguage(lang.language)" class="btn btn-link">{{lang.language}}</button></li>
     </ul>
   </div>
 

src/app/event-header/event-header.component.scss

@@ -22,6 +22,11 @@ h1 {
     display: inline-block;
 }
 
+.language-selector button {
+    margin:0;
+    padding: 0;
+}
+
 .language-selector > li+li:before {
     padding: 0 5px;
     color: #ccc;

src/app/event-header/event-header.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { Event } from '../model/event';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-event-header',
@@ -11,9 +12,13 @@ export class EventHeaderComponent implements OnInit {
   @Input()
   event: Event;
 
-  constructor() { }
+  constructor(private translate: TranslateService) { }
 
   ngOnInit() {
   }
 
+  public changeLanguage(lang: string): void {
+    this.translate.use(lang);
+  }
+
 }

src/styles.scss

@@ -15,4 +15,15 @@ body {
 .block-button {
     width: 100%;
     display: block
+}
+
+
+html[lang=nl] .language-selector button[lang=nl],
+html[lang=de] .language-selector button[lang=de],
+html[lang=en] .language-selector button[lang=en],
+html[lang=it] .language-selector button[lang=it],
+html[lang=fr] .language-selector button[lang=fr],
+html[lang=ro] .language-selector button[lang=ro],
+html[lang=pt] .language-selector button[lang=pt] {
+    font-weight: bold;
 }