Create 'AppTranslationService' to change the language after icon 'click'

gistfile1.txt

1) Import the 'AppTranslationService' as a 'provider' in the module, more info on this here: 
"Declare the service in the providers of a @NgModule which has both SearchComponent and TransferComponent in its declarations. 9 times out of 10 this is the right solution!"
https://stackoverflow.com/questions/42567674/share-data-between-components-using-a-service-in-angular2

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';
// Import translation service
import { AppTranslateService } from './translation.service';

// 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],
  // Add the AppTranslationService to providers
  providers: [AppTranslateService]
})
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 { AppTranslateService } from '../../translation.service';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent {
  constructor(private translateService: AppTranslateService) {}

  // Listen to clicks on language icons
  onLanguageChange(language: string) {
    this.translateService.changeLanguage(language);
  }

  // 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';
    }
  }
}

4) In 'translation.service.ts':
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
// Import translate service
import { TranslateService } from '@ngx-translate/core';

@Injectable()
export class AppTranslateService {
  constructor(public translate: TranslateService) {
    translate.addLangs(['de', 'en']);
    translate.setDefaultLang('de');
  }

  changeLanguage(language: string) {
    this.translate.use(language);
  }
}