Using 'TranslateService' to change the language after icon 'click'

gistfile1.txt

Situation: a main-page module with a navbar-component :)

1) In 'main-page.module':
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// Import Bootstrap
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
// Import components
import { MainPageComponent } from './main-page.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { FooterComponent } from './components/footer/footer.component';
import { JumbotronComponent } from './components/jumbotron/jumbotron.component';
import { AdvertisementsComponent } from './components/advertisements/advertisements.component';
import { RouterModule } from '@angular/router';
// Translate
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, '/assets/i18n/main-page/', '.json');
}

@NgModule({
  imports: [
    CommonModule,
    NgbModule.forRoot(),
    RouterModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  declarations: [
    MainPageComponent,
    NavbarComponent,
    FooterComponent,
    JumbotronComponent,
    AdvertisementsComponent
  ],
  bootstrap: [MainPageComponent],
  exports: [MainPageComponent]
})
export class MainPageModule {}

2) In 'navbar.component.html':
<!-- Top nav - language switch  -->
<div class="top-nav">
  <ul class="container top-nav__lang-switch text-uppercase">
    <li (click)="onLanguageChange($event.target.textContent)">de</li>
    <li>it</li>
    <li>fr</li>
    <li (click)="onLanguageChange($event.target.textContent)">en</li>
  </ul>
</div>

<!-- Navbar  -->
<div class="sticky-top" id="navbar">
  <nav class="container navbar navbar-light">
    <a class="navbar-brand" href="# ">
      <img class="navbar-brand__logo " src="../assets/main_page_images/vikijob_logo.png ">
    </a>
    <button type="button" class="navbar__login-button btn btn-outline-secondary ml-auto " translate>NAVBAR.LOGIN</button>
    <button type="button" routerLink="/register" class="navbar__btn--register btn btn-secondary " translate>NAVBAR.REGISTER</button>
  </nav>
</div>

3) In 'navbar.component.ts':
import { Component, OnInit, HostListener } from '@angular/core';
// Import translate service
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {
  changeLanguage: string = 'de';

  // Set the default language to Dutch
  constructor(public translate: TranslateService) {
    translate.addLangs(['de', 'en']);
    translate.setDefaultLang('de');
  }

  // Listen to clicks on language icons
  onLanguageChange(language: string) {
    this.changeLanguage = language;
    // When the icon is clicked - change the language
    this.translate.use(this.changeLanguage);
  }

  // Listen to 'window:scroll' event for window level scrolling.
  @HostListener('window:scroll', ['$event'])
  onWindowScroll($event: any) {
    const navbar = document.getElementById('navbar');
    // Check if the page offset is grater than 0 and if 'navbar' isn't 'null'.
    if (window.pageYOffset > 0 && navbar) {
      // Stick the 'navbar' to the top of the page.
      navbar.style.top = '0';
    }
  }

  ngOnInit() {}
}