diff --git a/src/app/actions.ts b/src/app/actions.ts
index fdeacd0d..d2176aab 100644
--- a/src/app/actions.ts
+++ b/src/app/actions.ts
@@ -21,7 +21,6 @@ export const CLOSE_SIDEBARS = 'CLOSE_SIDEBARS';
 export const NAVIGATE_TO_FOUNTAIN = 'NAVIGATE_TO_FOUNTAIN';
 export const UPDATE_FILTER_CATEGORIES = 'UPDATE_FILTER_CATEGORIES';
 export const CLOSE_NAVIGATION = 'CLOSE_NAVIGATION';
-export const CHANGE_LANG = 'CHANGE_LANG';
 export const CHANGE_CITY = 'CHANGE_CITY';
 export const CHANGE_MODE = 'CHANGE_MODE';
 export const CHANGE_TRAVEL_MODE = 'CHANGE_TRAVEL_MODE';
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 0d19e5ee..f3af8a03 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -19,7 +19,7 @@ import { DialogConfig, hideIntroVar } from './constants';
 import { IssueListComponent } from './issue-list/issue-list.component';
 import { finalize } from 'rxjs/operators';
 import { IntroWindowComponent } from './intro-window/intro-window.component';
-import { TranslateService } from '@ngx-translate/core';
+import { LanguageService } from './core/language.service';
 
 @Component({
   selector: 'app-root',
@@ -29,7 +29,6 @@ import { TranslateService } from '@ngx-translate/core';
 export class AppComponent implements OnInit {
   title = 'app';
   @select() mode;
-  @select() lang;
   @select() showList;
   @select() showMenu;
   @select() previewState;
@@ -51,7 +50,7 @@ export class AppComponent implements OnInit {
     public media: MediaMatcher,
     private dialog: MatDialog,
     private ngRedux: NgRedux<IAppState>,
-    private translate: TranslateService,
+    private languageService: LanguageService,
     private iconRegistry: MatIconRegistry,
     private sanitizer: DomSanitizer
   ) {
@@ -89,11 +88,7 @@ export class AppComponent implements OnInit {
 
   ngOnInit(): void {
     this.broadcastMediaChange();
-    //  MultiLanguages functionality default is en (English)
-    this.translate.use(this.ngRedux.getState().lang);
-    this.lang.subscribe(s => {
-      this.translate.use(s);
-    });
+    this.languageService.init();
 
     this.showList.subscribe(show => {
       if (this.listDrawer) {
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 3f37e73f..5de31fe6 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -7,43 +7,18 @@
 
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { NgRedux, NgReduxModule, DevToolsExtension } from '@angular-redux/store';
+import { NgRedux, DevToolsExtension, NgReduxModule } from '@angular-redux/store';
 
 import { AppComponent } from './app.component';
-import { NavbarComponent } from './navbar/navbar.component';
 import { MapComponent } from './map/map.component';
 import { ListComponent } from './list/list.component';
 import { IAppState, INITIAL_STATE, rootReducer } from './store';
-import { HttpClientModule, HttpClient } from '@angular/common/http';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { DataService } from './data.service';
 import { MapConfig } from './map/map.config';
 import { FormsModule } from '@angular/forms';
 import { DetailComponent } from './detail/detail.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgProgressModule } from '@ngx-progressbar/core';
-import { NgProgressHttpModule } from '@ngx-progressbar/http';
-import { MatBadgeModule } from '@angular/material/badge';
-import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatExpansionModule } from '@angular/material/expansion';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatListModule } from '@angular/material/list';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatRadioModule } from '@angular/material/radio';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatSliderModule } from '@angular/material/slider';
-import { MatTableModule } from '@angular/material/table';
-import { MatTabsModule } from '@angular/material/tabs';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatTooltipModule } from '@angular/material/tooltip';
 import { MediaMatcher } from '@angular/cdk/layout';
 import { MobileMenuComponent } from './mobile-menu/mobile-menu.component';
 import { FilterComponent } from './filter/filter.component';
@@ -60,9 +35,6 @@ import { FountainPropertyBadgeComponent } from './fountain-property-badge/founta
 import { FountainPropertyDialogComponent } from './fountain-property-dialog/fountain-property-dialog.component';
 import { TruncatePipe } from './pipes/truncate';
 import { MinuteSecondsPipe } from './pipes/minute.seconds';
-// Imports for Multilingual Integration
-import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
-import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { StateSelectorComponent } from './state-selector/state-selector.component';
 import { RouterModule } from '@angular/router';
 import { RouterComponent } from './router/router.component';
@@ -71,15 +43,17 @@ import { NgxGalleryModule } from '@kolkov/ngx-gallery';
 import { IssueIndicatorComponent } from './issue-indicator/issue-indicator.component';
 import { IssueListComponent } from './issue-list/issue-list.component';
 
-// Locales
-import { registerLocaleData } from '@angular/common';
-import localeFr from '@angular/common/locales/fr';
-import localeDe from '@angular/common/locales/de';
-import localeIt from '@angular/common/locales/it';
-import localeTr from '@angular/common/locales/tr';
 import { IntroWindowComponent } from './intro-window/intro-window.component';
 import { LegendComponent } from './legend/legend.component';
 import { EscapeHtmlPipe } from './pipes/keep-html.pipe';
+import { GoogleMaterialModule } from './core/google-material.module';
+import { NgProgressHttpModule } from '@ngx-progressbar/http';
+import { NgProgressModule } from '@ngx-progressbar/core';
+import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
+import { NavbarComponent } from './navbar/navbar.component';
+import { LanguageSelectorComponent } from './core/language-selector.component';
+import { LanguageService } from './core/language.service';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 
 @NgModule({
   declarations: [
@@ -109,6 +83,7 @@ import { EscapeHtmlPipe } from './pipes/keep-html.pipe';
     CallToActionComponent,
     IntroWindowComponent,
     LegendComponent,
+    LanguageSelectorComponent,
   ],
   entryComponents: [
     GuideSelectorComponent,
@@ -121,50 +96,26 @@ import { EscapeHtmlPipe } from './pipes/keep-html.pipe';
     IntroWindowComponent,
   ],
   imports: [
+    GoogleMaterialModule,
     BrowserAnimationsModule,
     BrowserModule,
     FormsModule,
     NgxGalleryModule,
-    HttpClientModule,
-    MatBadgeModule,
-    MatBottomSheetModule,
-    MatButtonModule,
-    MatCardModule,
-    MatCheckboxModule,
-    MatDialogModule,
-    MatSnackBarModule,
-    MatDividerModule,
-    MatExpansionModule,
-    MatFormFieldModule,
-    MatIconModule,
-    MatInputModule,
-    MatListModule,
-    MatMenuModule,
-    MatRadioModule,
-    MatSelectModule,
-    MatSidenavModule,
-    MatSliderModule,
-    MatTableModule,
-    MatTabsModule,
-    MatToolbarModule,
-    MatTooltipModule,
     NgProgressModule.forRoot(),
     NgProgressHttpModule.forRoot(),
     NgReduxModule,
-    RouterModule.forRoot(
-      [
-        {
-          path: ':city',
-          component: RouterComponent,
-        },
-        {
-          path: '',
-          redirectTo: '/ch-zh',
-          pathMatch: 'full',
-        },
-      ],
-      { useHash: false, relativeLinkResolution: 'legacy' }
-    ),
+    HttpClientModule,
+    RouterModule.forRoot([
+      {
+        path: ':city',
+        component: RouterComponent,
+      },
+      {
+        path: '',
+        redirectTo: '/ch-zh',
+        pathMatch: 'full',
+      },
+    ]),
     TranslateModule.forRoot({
       loader: {
         provide: TranslateLoader,
@@ -173,8 +124,8 @@ import { EscapeHtmlPipe } from './pipes/keep-html.pipe';
       },
     }),
   ],
-  exports: [TranslateModule, RouterModule],
-  providers: [DataService, ListComponent, MapConfig, MediaMatcher],
+  exports: [RouterModule, TranslateModule, NavbarComponent, LanguageSelectorComponent],
+  providers: [TranslateService, LanguageService, DataService, ListComponent, MapConfig, MediaMatcher],
   bootstrap: [AppComponent],
 })
 // eslint-disable-next-line @typescript-eslint/no-extraneous-class
@@ -183,25 +134,11 @@ export class AppModule {
     // When DevTools is active, the page shows up blank on browsers other than chrome
     const enhancers = devTools.isEnabled() ? [devTools.enhancer()] : [];
     ngRedux.configureStore(rootReducer, INITIAL_STATE, [], enhancers);
-
-    // hide address bar after load
-    // window.addEventListener("load",function() {
-    //   setTimeout(function(){
-    //     // This hides the address bar:
-    //     window.scrollTo(0, 1);
-    //   }, 0);
-    // });
   }
 }
 
 // Multilingual HttpLoader
 // AoT requires an exported function for factories
-export function HttpLoaderFactory(http: HttpClient) {
+function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http);
 }
-
-// Register locales
-registerLocaleData(localeFr, 'fr');
-registerLocaleData(localeDe, 'de');
-registerLocaleData(localeIt, 'it');
-registerLocaleData(localeTr, 'tr');
diff --git a/src/app/core/google-material.module.ts b/src/app/core/google-material.module.ts
new file mode 100644
index 00000000..6dd76909
--- /dev/null
+++ b/src/app/core/google-material.module.ts
@@ -0,0 +1,77 @@
+import { NgModule } from '@angular/core';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatTableModule } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
+
+@NgModule({
+  imports: [
+    MatBadgeModule,
+    MatBottomSheetModule,
+    MatButtonModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatDialogModule,
+    MatSnackBarModule,
+    MatDividerModule,
+    MatExpansionModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatListModule,
+    MatMenuModule,
+    MatRadioModule,
+    MatSelectModule,
+    MatSidenavModule,
+    MatSliderModule,
+    MatTableModule,
+    MatTabsModule,
+    MatToolbarModule,
+    MatTooltipModule,
+  ],
+  exports: [
+    MatBadgeModule,
+    MatBottomSheetModule,
+    MatButtonModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatDialogModule,
+    MatSnackBarModule,
+    MatDividerModule,
+    MatExpansionModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatListModule,
+    MatMenuModule,
+    MatRadioModule,
+    MatSelectModule,
+    MatSidenavModule,
+    MatSliderModule,
+    MatTableModule,
+    MatTabsModule,
+    MatToolbarModule,
+    MatTooltipModule,
+  ],
+  providers: [{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline' } }],
+})
+// eslint-disable-next-line @typescript-eslint/no-extraneous-class
+export class GoogleMaterialModule {}
diff --git a/src/app/core/language-selector.component.css b/src/app/core/language-selector.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/core/language-selector.component.html b/src/app/core/language-selector.component.html
new file mode 100644
index 00000000..3dd24789
--- /dev/null
+++ b/src/app/core/language-selector.component.html
@@ -0,0 +1,5 @@
+<mat-form-field>
+  <mat-select class="responsive" (selectionChange)="changeLocale($event)" [value]="langObservable | async">
+    <mat-option *ngFor="let l of languages" [value]="l">{{ 'lang.' + l | translate }}</mat-option>
+  </mat-select>
+</mat-form-field>
diff --git a/src/app/core/language-selector.component.ts b/src/app/core/language-selector.component.ts
new file mode 100644
index 00000000..fb4e1e06
--- /dev/null
+++ b/src/app/core/language-selector.component.ts
@@ -0,0 +1,23 @@
+import { NgRedux } from '@angular-redux/store';
+import { Component } from '@angular/core';
+import { TOGGLE_MENU } from '../actions';
+import { IAppState } from '../store';
+import { LanguageService } from './language.service';
+
+@Component({
+  selector: 'app-lang-select',
+  templateUrl: './language-selector.component.html',
+  styleUrls: ['./language-selector.component.css'],
+})
+export class LanguageSelectorComponent {
+  constructor(private languageService: LanguageService, private ngRedux: NgRedux<IAppState>) {}
+
+  public languages = this.languageService.languages;
+  public langObservable = this.languageService.langObservable;
+
+  changeLocale(event: { value: string }) {
+    this.languageService.changeLang(event.value);
+    // TODO replace by a service call
+    this.ngRedux.dispatch({ type: TOGGLE_MENU, payload: false });
+  }
+}
diff --git a/src/app/core/language.service.ts b/src/app/core/language.service.ts
new file mode 100644
index 00000000..50cf920a
--- /dev/null
+++ b/src/app/core/language.service.ts
@@ -0,0 +1,93 @@
+import { Injectable } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { registerLocaleData } from '@angular/common';
+import localeFr from '@angular/common/locales/fr';
+import localeDe from '@angular/common/locales/de';
+import localeIt from '@angular/common/locales/it';
+import localeTr from '@angular/common/locales/tr';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+const defaultLang = 'de';
+// the given order of the language codes here
+// determines the order in the language dropdown
+const languageConfig = [
+  {
+    code: 'en',
+    aliases: ['english', 'anglais', 'englisch', 'en', 'e'],
+  },
+  {
+    code: 'de',
+    aliases: ['german', 'allemand', 'deutsch', 'de', 'd'],
+  },
+  {
+    code: 'fr',
+    aliases: ['french', 'französisch', 'franzoesisch', 'francais', 'fr', 'f'],
+  },
+  {
+    code: 'it',
+    aliases: ['italian', 'italiano', 'italien', 'italienisch', 'it', 'i'],
+  },
+  {
+    code: 'tr',
+    aliases: ['turc', 'türkisch', 'turco', 'turkish', 'tr', 't'],
+  },
+  {
+    code: 'sr',
+    aliases: ['srpski', 'serbian', 'serbian', 'sr', 'srb'],
+  },
+];
+
+@Injectable()
+export class LanguageService {
+  languages: string[] = languageConfig.map(l => l.code);
+
+  private langSubject = new BehaviorSubject(defaultLang);
+
+  constructor(private translateService: TranslateService) {}
+
+  init(): void {
+    // Register locales
+    //TODO #394 @ralf.hauser, misses sr, on purpose?
+    registerLocaleData(localeDe, 'de');
+    registerLocaleData(localeFr, 'fr');
+    registerLocaleData(localeIt, 'it');
+    registerLocaleData(localeTr, 'tr');
+
+    this.translateService.addLangs(this.languages);
+    this.translateService.setDefaultLang(defaultLang);
+    const currentLang = this.determineCurrentLang();
+    this.translateService.use(currentLang);
+  }
+
+  changeLang(newLang: string): void {
+    const lang = this.parseLang(newLang);
+    if (lang === undefined) {
+      throw new Error('given language is not supported: ' + newLang);
+    }
+    if (this.langSubject.value !== lang) {
+      this.translateService.use(lang);
+      this.langSubject.next(lang);
+      //TODO #359 store choice in localStorage
+    }
+  }
+
+  determineCurrentLang(): string {
+    //TODO #395 and #369 use preferred language according to last chosen language and infer from browser on first visit
+    return defaultLang;
+  }
+
+  private parseLang(lang: string | undefined): string | undefined {
+    if (lang === undefined || lang === null) return undefined;
+
+    const langLower = lang.toLowerCase();
+    return languageConfig.find(x => x.aliases.includes(langLower))?.code;
+  }
+
+  get currentLang(): string {
+    return this.langSubject.value;
+  }
+
+  get langObservable(): Observable<string> {
+    return this.langSubject.asObservable();
+  }
+}
diff --git a/src/app/core/subscription.service.ts b/src/app/core/subscription.service.ts
new file mode 100644
index 00000000..d64c10c9
--- /dev/null
+++ b/src/app/core/subscription.service.ts
@@ -0,0 +1,35 @@
+import { Injectable, OnDestroy } from '@angular/core';
+import { Subject, Subscription } from 'rxjs';
+import { environment } from '../../environments/environment';
+
+/**
+ * @author Tegonal GmbH
+ * @license AGPL
+ */
+@Injectable()
+export class SubscriptionService implements OnDestroy {
+  private subscriptions = Array<Subscription>();
+  private subjects = Array<Subject<any>>();
+
+  public registerSubscriptions(...subscription: Subscription[]): void {
+    this.subscriptions.push(...subscription);
+  }
+
+  public registerSubjects(...subjects: Subject<any>[]): void {
+    this.subjects.push(...subjects);
+  }
+
+  ngOnDestroy(): void {
+    this.cleanupSubscriptions();
+  }
+
+  public cleanupSubscriptions(): void {
+    if (!environment.production) {
+      console.log('cleanup ' + this.subscriptions.length + ' subscriptions and ' + this.subjects.length + ' subjects');
+    }
+    this.subscriptions.forEach(subscripton => subscripton.unsubscribe());
+    this.subscriptions = [];
+    this.subjects.forEach(subject => subject.complete());
+    this.subjects = [];
+  }
+}
diff --git a/src/app/data.service.ts b/src/app/data.service.ts
index 0c1b751e..cb9a57a7 100755
--- a/src/app/data.service.ts
+++ b/src/app/data.service.ts
@@ -18,6 +18,7 @@ import { versions as buildInfo } from '../environments/versions';
 import { ADD_APP_ERROR, GET_DIRECTIONS_SUCCESS, PROCESSING_ERRORS_LOADED, SELECT_FOUNTAIN_SUCCESS } from './actions';
 import { aliases } from './aliases';
 import { defaultFilter, extImgPlaceholderI333pm, propertyStatuses } from './constants';
+import { LanguageService } from './core/language.service';
 import { essenceOf, getId, getImageUrl, replaceFountain, sanitizeTitle } from './database.service';
 // Import data from fountain_properties.ts.
 import { fountain_properties } from './fountain_properties';
@@ -39,7 +40,6 @@ export class DataService {
   @select() fountainId;
   @select() userLocation;
   @select() mode: Observable<string>;
-  @select('lang') lang$: Observable<string>;
   @select('city') city$: Observable<City | null>;
   @select('travelMode') travelMode$;
   @Output() fountainSelectedSuccess: EventEmitter<Feature<any>> = new EventEmitter<Feature<any>>();
@@ -66,7 +66,12 @@ export class DataService {
       return null;
     }
   }
-  constructor(private translate: TranslateService, private http: HttpClient, private ngRedux: NgRedux<IAppState>) {
+  constructor(
+    private translateService: TranslateService,
+    private languageService: LanguageService,
+    private http: HttpClient,
+    private ngRedux: NgRedux<IAppState>
+  ) {
     console.log('constuctor start ' + new Date().toISOString());
 
     // Subscribe to changes in application state
@@ -79,7 +84,7 @@ export class DataService {
         this.getDirections();
       }
     });
-    this.lang$.subscribe(() => {
+    this.languageService.langObservable.subscribe(() => {
       if (this.ngRedux.getState().mode === 'directions') {
         this.getDirections();
       }
@@ -1088,10 +1093,10 @@ export class DataService {
     const s = this.ngRedux.getState();
     if (s.fountainSelected !== null) {
       if (s.userLocation === null) {
-        this.translate.get('action.navigate_tooltip').subscribe(alert);
+        this.translateService.get('action.navigate_tooltip').subscribe(alert);
         return;
       }
-      const url = `https://api.mapbox.com/directions/v5/mapbox/${s.travelMode}/${s.userLocation[0]},${s.userLocation[1]};${s.fountainSelected.geometry.coordinates[0]},${s.fountainSelected.geometry.coordinates[1]}?access_token=${environment.mapboxApiKey}&geometries=geojson&steps=true&language=${s.lang}`;
+      const url = `https://api.mapbox.com/directions/v5/mapbox/${s.travelMode}/${s.userLocation[0]},${s.userLocation[1]};${s.fountainSelected.geometry.coordinates[0]},${s.fountainSelected.geometry.coordinates[1]}?access_token=${environment.mapboxApiKey}&geometries=geojson&steps=true&language=${this.languageService.currentLang}`;
 
       this.http.get(url).subscribe((data: FeatureCollection<any>) => {
         this.ngRedux.dispatch({ type: GET_DIRECTIONS_SUCCESS, payload: data });
diff --git a/src/app/detail/detail.component.html b/src/app/detail/detail.component.html
index 0117c741..b4c67293 100644
--- a/src/app/detail/detail.component.html
+++ b/src/app/detail/detail.component.html
@@ -4,385 +4,395 @@
 * Use of this code is governed by the GNU Affero General Public License (https://www.gnu.org/licenses/agpl-3.0)
 * and the profit contribution agreement available at https://www.my-d.org/ProfitContributionAgreement
 -->
-<div class="holder" *ngIf="isMetadataLoaded">
-  <mat-card class="mat-elevation-z4">
-    <mat-card-title-group>
-      <mat-card-title>
-        {{ fountain.properties['name_' + lang].value }}
-        <span *ngIf="!fountain.properties['name_' + lang].value">
-          {{ 'other.unnamed_fountain' | translate }}
-          <app-call-to-action [property]="fountain.properties['name_' + lang]"></app-call-to-action>
-        </span>
-      </mat-card-title>
-      <mat-card-subtitle>
-        <ng-container *ngIf="fountain.properties['description_short_' + lang].value !== null">
-          {{ fountain.properties['description_short_' + lang].value }}<br />
-        </ng-container>
-        <app-property-badge [property]="fountain.properties.potable" [showIfUndefined]="true"></app-property-badge>
-        <app-property-badge [property]="fountain.properties.water_type" [showIfUndefined]="false"></app-property-badge>
-        <app-property-badge
-          [property]="fountain.properties.construction_date"
-          [showIfUndefined]="false"
-        ></app-property-badge>
-        <app-property-badge
-          [property]="fountain.properties.access_wheelchair"
-          [showIfUndefined]="true"
-        ></app-property-badge>
-        <app-property-badge [property]="fountain.properties.access_pet" [showIfUndefined]="true"></app-property-badge>
-        <app-property-badge
-          [property]="fountain.properties.access_bottle"
-          [showIfUndefined]="fountain.properties.potable.value === 'yes'"
-        ></app-property-badge>
-        <app-property-badge
-          [property]="fountain.properties.swimming_place"
-          [showIfUndefined]="false"
-        ></app-property-badge>
-      </mat-card-subtitle>
-    </mat-card-title-group>
-
-    <ngx-gallery
-      #gallery
-      [options]="galleryOptions"
-      [images]="fountain.properties.gallery.value"
-      (previewOpen)="setPreviewState('open', fountain.properties.id_wikidata.value)"
-      (previewClose)="setPreviewState('closed', fountain.properties.id_wikidata.value)"
-      (change)="onImageChange($event)"
-    >
-    </ngx-gallery>
+<!-- TODO it would be better if we transform fountain beforehand so that it has all the properties we need
+  (also regarding fallback) and we don't have to look them up via key + lang
+-->
+<ng-container *ngIf="langObservable | async; let lang">
+  <div class="holder" *ngIf="isMetadataLoaded">
+    <mat-card class="mat-elevation-z4">
+      <mat-card-title-group>
+        <mat-card-title>
+          {{ fountain.properties['name_' + lang].value }}
+          <span *ngIf="!fountain.properties['name_' + lang].value">
+            {{ 'other.unnamed_fountain' | translate }}
+            <app-call-to-action [property]="fountain.properties['name_' + lang]"></app-call-to-action>
+          </span>
+        </mat-card-title>
+        <mat-card-subtitle>
+          <ng-container *ngIf="fountain.properties['description_short_' + lang].value !== null">
+            {{ fountain.properties['description_short_' + lang].value }}<br />
+          </ng-container>
+          <app-property-badge [property]="fountain.properties.potable" [showIfUndefined]="true"></app-property-badge>
+          <app-property-badge
+            [property]="fountain.properties.water_type"
+            [showIfUndefined]="false"
+          ></app-property-badge>
+          <app-property-badge
+            [property]="fountain.properties.construction_date"
+            [showIfUndefined]="false"
+          ></app-property-badge>
+          <app-property-badge
+            [property]="fountain.properties.access_wheelchair"
+            [showIfUndefined]="true"
+          ></app-property-badge>
+          <app-property-badge [property]="fountain.properties.access_pet" [showIfUndefined]="true"></app-property-badge>
+          <app-property-badge
+            [property]="fountain.properties.access_bottle"
+            [showIfUndefined]="fountain.properties.potable.value === 'yes'"
+          ></app-property-badge>
+          <app-property-badge
+            [property]="fountain.properties.swimming_place"
+            [showIfUndefined]="false"
+          ></app-property-badge>
+        </mat-card-subtitle>
+      </mat-card-title-group>
 
-    <svg id="watermark" viewBox="0 0 10 5" *ngIf="fountain.properties.gallery.status !== 'PROP_STATUS_OK'">
-      <text
-        x="5"
-        y="1"
-        text-anchor="middle"
-        font-size="1.5"
-        fill="none"
-        stroke-width=".02"
-        stroke="#fff"
-        font-family="sans-serif"
+      <ngx-gallery
+        #gallery
+        [options]="galleryOptions"
+        [images]="fountain.properties.gallery.value"
+        (previewOpen)="setPreviewState('open', fountain.properties.id_wikidata.value)"
+        (previewClose)="setPreviewState('closed', fountain.properties.id_wikidata.value)"
+        (change)="onImageChange($event)"
       >
-        {{ 'gallery.watermark' | translate }}
-      </text>
-    </svg>
+      </ngx-gallery>
 
-    <div style="width: 100%; height: 20px; text-align: right; position: absolute; left: 0">
-      <div id="add-image-app-call-to-action-area">
-        <!--Call to action if the image status is not ok. Issue proximap #136-->
-        <div
-          class="mat-elevation-z2"
-          id="image-app-call-to-action"
-          *ngIf="fountain.properties.gallery.status !== 'PROP_STATUS_OK' && showImageCallToAction"
+      <svg id="watermark" viewBox="0 0 10 5" *ngIf="fountain.properties.gallery.status !== 'PROP_STATUS_OK'">
+        <text
+          x="5"
+          y="1"
+          text-anchor="middle"
+          font-size="1.5"
+          fill="none"
+          stroke-width=".02"
+          stroke="#fff"
+          font-family="sans-serif"
         >
-          {{ 'gallery.call_to_action' | translate }}
-          <br /><button mat-button color="accent" (click)="hideImageCallToAction()">
-            {{ 'action.hide_call_to_action' | translate }}
+          {{ 'gallery.watermark' | translate }}
+        </text>
+      </svg>
+
+      <div style="width: 100%; height: 20px; text-align: right; position: absolute; left: 0">
+        <div id="add-image-app-call-to-action-area">
+          <!--Call to action if the image status is not ok. Issue proximap #136-->
+          <div
+            class="mat-elevation-z2"
+            id="image-app-call-to-action"
+            *ngIf="fountain.properties.gallery.status !== 'PROP_STATUS_OK' && showImageCallToAction"
+          >
+            {{ 'gallery.call_to_action' | translate }}
+            <br /><button mat-button color="accent" (click)="hideImageCallToAction()">
+              {{ 'action.hide_call_to_action' | translate }}
+            </button>
+          </div>
+          <button
+            mat-mini-fab
+            id="add-image-guide-button"
+            color="accent"
+            title="{{ 'action.cta_image' | translate }}"
+            (click)="openImagesGuide()"
+          >
+            <mat-icon>add</mat-icon>
           </button>
         </div>
-        <button
-          mat-mini-fab
-          id="add-image-guide-button"
-          color="accent"
-          title="{{ 'action.cta_image' | translate }}"
-          (click)="openImagesGuide()"
-        >
-          <mat-icon>add</mat-icon>
-        </button>
       </div>
-    </div>
 
-    <mat-card-content>
-      <mat-list>
-        <mat-list-item
-          *ngIf="
-            fountain.properties.gallery &&
-            null !== imageCaptionData &&
-            imageCaptionData.caption !== '' &&
-            0 < imageCaptionData.caption.trim().length
-          "
-        >
-          <mat-icon svgIcon="wikimedia" mat-list-icon matTooltip="commons.wikimedia.org"></mat-icon>
-          <span [innerHTML]="imageCaptionData.caption"></span>
-          <a
-            *ngFor="let link of imageCaptionData.links"
-            mat-icon-button
-            color="accent"
-            [matTooltip]="
-              link ? ('detail.caption.view_website' | translate) : ('detail.caption.edit_wikidata' | translate)
+      <mat-card-content>
+        <mat-list>
+          <mat-list-item
+            *ngIf="
+              fountain.properties.gallery &&
+              null !== imageCaptionData &&
+              imageCaptionData.caption !== '' &&
+              0 < imageCaptionData.caption.trim().length
             "
-            target="_blank"
-            class="captionLink"
-            [href]="link"
-          >
-            <mat-icon inline>open_in_new</mat-icon>
-          </a>
-        </mat-list-item>
-        <mat-list-item *ngIf="fountain.properties['wikipedia_' + lang + '_url'].value !== null">
-          <mat-icon svgIcon="wikipedia" mat-list-icon></mat-icon>
-          <span>{{
-            fountain.properties['wikipedia_' + lang + '_url'].derived.summary | truncate: constas?.maxWikiCiteLgth
-          }}</span>
-          <a target="_blank" href="{{ fountain.properties['wikipedia_' + lang + '_url'].value }}"
-            ><mat-icon>open_in_new</mat-icon></a
           >
-        </mat-list-item>
-
-        <mat-list-item *ngIf="fountain.properties.artist_name.derived.name !== null">
-          <!--add artist for #129-->
-          <mat-icon mat-list-icon title="{{ propMeta['artist_name'].name[lang] }}">person_outline</mat-icon>
-          {{ fountain.properties.artist_name.derived.name }}
-
-          <!--URL for https://github.com/water-fountains/proximap/issues/163-->
-          <ng-container *ngIf="fountain.properties.artist_name.derived.website.wikidata">
+            <mat-icon svgIcon="wikimedia" mat-list-icon matTooltip="commons.wikimedia.org"></mat-icon>
+            <span [innerHTML]="imageCaptionData.caption"></span>
             <a
+              *ngFor="let link of imageCaptionData.links"
               mat-icon-button
               color="accent"
               [matTooltip]="
-                fountain.properties.artist_name.derived.website.url
-                  ? ('detail.artist.view_website' | translate)
-                  : ('detail.artist.edit_wikidata' | translate)
+                link ? ('detail.caption.view_website' | translate) : ('detail.caption.edit_wikidata' | translate)
               "
               target="_blank"
-              [href]="
-                fountain.properties.artist_name.derived.website.url ||
-                fountain.properties.artist_name.derived.website.wikidata
-              "
+              class="captionLink"
+              [href]="link"
             >
-              <!--{{fountain.properties.artist_name.derived.url.split('//')[1] | truncate:'20'}}-->
               <mat-icon inline>open_in_new</mat-icon>
             </a>
-            <a
-              mat-icon-button
-              color="primary"
-              style="right: 0"
-              title="{{ 'detail.artist.edit_wikidata' | translate }}"
-              target="_blank"
-              [href]="fountain.properties.artist_name.derived.website.wikidata"
+          </mat-list-item>
+          <mat-list-item *ngIf="fountain.properties['wikipedia_' + lang + '_url'].value !== null">
+            <mat-icon svgIcon="wikipedia" mat-list-icon></mat-icon>
+            <span>{{
+              fountain.properties['wikipedia_' + lang + '_url'].derived.summary | truncate: constas?.maxWikiCiteLgth
+            }}</span>
+            <a target="_blank" href="{{ fountain.properties['wikipedia_' + lang + '_url'].value }}"
+              ><mat-icon>open_in_new</mat-icon></a
             >
-              <mat-icon inline>edit</mat-icon>
-            </a>
-          </ng-container>
-        </mat-list-item>
+          </mat-list-item>
 
-        <mat-list-item *ngIf="fountain.properties.directions.value !== null">
-          <mat-icon mat-list-icon title="{{ propMeta['directions'].name[lang] }}">location_on</mat-icon>
-          {{ fountain.properties.directions.value }}
-        </mat-list-item>
+          <mat-list-item *ngIf="fountain?.properties?.artist_name?.derived?.name !== null">
+            <!--add artist for #129-->
+            <mat-icon mat-list-icon title="{{ propMeta['artist_name'].name[lang] }}">person_outline</mat-icon>
+            {{ fountain.properties.artist_name.derived.name }}
 
-        <!--add operator name and link for #149-->
-        <mat-list-item
-          title="{{ propMeta['operator_name'].name[lang] }}"
-          *ngIf="
-            fountain.properties.operator_name.hasOwnProperty('derived') &&
-            fountain.properties.operator_name.derived.name &&
-            0 < fountain.properties.operator_name.derived.name.trim().length
-          "
-        >
-          <mat-icon mat-list-icon>location_city</mat-icon>
-          {{ fountain.properties.operator_name.derived.name }}
-          <!--URL-->
-          <ng-container>
-            <a
-              mat-icon-button
-              *ngIf="
-                fountain.properties.operator_name.hasOwnProperty('derived') &&
-                fountain.properties.operator_name.derived.url
-              "
-              color="accent"
-              title="{{ 'detail.operator.view_website' | translate }}"
-              target="_blank"
-              [href]="fountain.properties.operator_name.derived.url"
-            >
-              <!--{{fountain.properties.operator_name.derived.url.split('//')[1] | truncate:'20'}}-->
-              <mat-icon inline>open_in_new</mat-icon>
-            </a>
-            <a
-              mat-icon-button
-              *ngIf="fountain.properties.operator_name.hasOwnProperty('derived')"
-              color="primary"
-              style="right: 0"
-              title="{{ 'detail.operator.edit_wikidata' | translate }}"
-              target="_blank"
-              [href]="'https://wikidata.org/wiki/' + fountain.properties.operator_name.derived.qid"
-            >
-              <mat-icon inline>edit</mat-icon>
-            </a>
-          </ng-container>
-        </mat-list-item>
+            <!--URL for https://github.com/water-fountains/proximap/issues/163-->
+            <ng-container *ngIf="fountain.properties.artist_name.derived.website.wikidata">
+              <a
+                mat-icon-button
+                color="accent"
+                [matTooltip]="
+                  fountain.properties.artist_name.derived.website.url
+                    ? ('detail.artist.view_website' | translate)
+                    : ('detail.artist.edit_wikidata' | translate)
+                "
+                target="_blank"
+                [href]="
+                  fountain.properties.artist_name.derived.website.url ||
+                  fountain.properties.artist_name.derived.website.wikidata
+                "
+              >
+                <!--{{fountain.properties.artist_name.derived.url.split('//')[1] | truncate:'20'}}-->
+                <mat-icon inline>open_in_new</mat-icon>
+              </a>
+              <a
+                mat-icon-button
+                color="primary"
+                style="right: 0"
+                title="{{ 'detail.artist.edit_wikidata' | translate }}"
+                target="_blank"
+                [href]="fountain.properties.artist_name.derived.website.wikidata"
+              >
+                <mat-icon inline>edit</mat-icon>
+              </a>
+            </ng-container>
+          </mat-list-item>
 
-        <mat-list-item>
-          <mat-icon svgIcon="panorama" mat-list-icon title="{{ propMeta['pano_url'].name[lang] }}"></mat-icon>
-          <span *ngFor="let pano of fountain.properties.pano_url.value">
+          <mat-list-item *ngIf="fountain.properties.directions.value !== null">
+            <mat-icon mat-list-icon title="{{ propMeta['directions'].name[lang] }}">location_on</mat-icon>
+            {{ fountain.properties.directions.value }}
+          </mat-list-item>
+
+          <!--add operator name and link for #149-->
+          <mat-list-item
+            title="{{ propMeta['operator_name'].name[lang] }}"
+            *ngIf="
+              fountain.properties.operator_name.hasOwnProperty('derived') &&
+              fountain.properties.operator_name.derived.name &&
+              0 < fountain.properties.operator_name.derived.name.trim().length
+            "
+          >
+            <mat-icon mat-list-icon>location_city</mat-icon>
+            {{ fountain.properties.operator_name.derived.name }}
+            <!--URL-->
+            <ng-container>
+              <a
+                mat-icon-button
+                *ngIf="
+                  fountain.properties.operator_name.hasOwnProperty('derived') &&
+                  fountain.properties.operator_name.derived.url
+                "
+                color="accent"
+                title="{{ 'detail.operator.view_website' | translate }}"
+                target="_blank"
+                [href]="fountain.properties.operator_name.derived.url"
+              >
+                <!--{{fountain.properties.operator_name.derived.url.split('//')[1] | truncate:'20'}}-->
+                <mat-icon inline>open_in_new</mat-icon>
+              </a>
+              <a
+                mat-icon-button
+                *ngIf="fountain.properties.operator_name.hasOwnProperty('derived')"
+                color="primary"
+                style="right: 0"
+                title="{{ 'detail.operator.edit_wikidata' | translate }}"
+                target="_blank"
+                [href]="'https://wikidata.org/wiki/' + fountain.properties.operator_name.derived.qid"
+              >
+                <mat-icon inline>edit</mat-icon>
+              </a>
+            </ng-container>
+          </mat-list-item>
+
+          <mat-list-item>
+            <mat-icon svgIcon="panorama" mat-list-icon title="{{ propMeta['pano_url'].name[lang] }}"></mat-icon>
+            <span *ngFor="let pano of fountain.properties.pano_url.value">
+              <a
+                mat-stroked-button
+                class="quicklink"
+                [href]="pano.url"
+                [title]="'quicklink.pano_url' | translate"
+                target="_blank"
+                >{{ pano.source_name }}&nbsp;
+                <mat-icon inline>open_in_new</mat-icon>
+              </a>
+              <!--#137-->
+              <button
+                mat-mini-fab
+                class="addNonCuratedSmallBtn"
+                *ngIf="pano.url.indexOf('instantstreetview') > 0"
+                color="accent"
+                title="{{ 'detail.pano_url.contribute' | translate }}"
+                (click)="getWikiDataUrl(fountain.properties.id_wikidata.value)"
+              >
+                <mat-icon class="addNonCuratedSmallPlus">add</mat-icon>
+              </button>
+              <a
+                mat-icon-button
+                *ngIf="pano.url.indexOf('instantstreetview') < 0"
+                color="primary"
+                style="right: 0"
+                title="{{ 'detail.pano_url.edit_wikidata' | translate }}"
+                target="_blank"
+                [href]="'https://wikidata.org/wiki/' + fountain.properties.id_wikidata.value"
+              >
+                <mat-icon inline>edit</mat-icon>
+              </a>
+            </span>
+          </mat-list-item>
+
+          <mat-list-item *ngIf="fountain.properties.described_at_url.value !== null">
+            <!--add url for #131-->
+            <mat-icon mat-list-icon title="{{ propMeta['described_at_url'].name[lang] }}">link</mat-icon>
             <a
               mat-stroked-button
               class="quicklink"
-              [href]="pano.url"
-              [title]="'quicklink.pano_url' | translate"
+              *ngFor="let url of fountain.properties['described_at_url'].value"
+              [href]="url"
               target="_blank"
-              >{{ pano.source_name }}&nbsp;
-              <mat-icon inline>open_in_new</mat-icon>
-            </a>
-            <!--#137-->
-            <button
-              mat-mini-fab
-              class="addNonCuratedSmallBtn"
-              *ngIf="pano.url.indexOf('instantstreetview') > 0"
-              color="accent"
-              title="{{ 'detail.pano_url.contribute' | translate }}"
-              (click)="getWikiDataUrl(fountain.properties.id_wikidata.value)"
+              >{{ url.split('//')[1] | truncate: 20 }}</a
             >
-              <mat-icon class="addNonCuratedSmallPlus">add</mat-icon>
-            </button>
+          </mat-list-item>
+        </mat-list>
+
+        <!--Button and list added for #142 to show nearest public transport stops.
+      Only show for swiss cities as per https://github.com/water-fountains/proximap/issues/243#issuecomment-496823820-->
+        <mat-expansion-panel *ngIf="(city$ | async).split('-')[0] === 'ch'">
+          <mat-expansion-panel-header (click)="getNearestStations()" title="powered by transport.opendata.ch">
+            <mat-icon class="marginright">directions_transit</mat-icon>&nbsp;<span translate
+              >action.findNearestStations</span
+            >
+          </mat-expansion-panel-header>
+          <mat-nav-list>
             <a
-              mat-icon-button
-              *ngIf="pano.url.indexOf('instantstreetview') < 0"
-              color="primary"
-              style="right: 0"
-              title="{{ 'detail.pano_url.edit_wikidata' | translate }}"
+              mat-list-item
               target="_blank"
-              [href]="'https://wikidata.org/wiki/' + fountain.properties.id_wikidata.value"
+              title="{{ 'action.showStationTimetable' | translate }}"
+              href="{{ getStationDepartureUrl(station.id) }}"
+              *ngFor="let station of nearestStations"
             >
-              <mat-icon inline>edit</mat-icon>
+              <span>{{ station.name }} ({{ station.distance }} m)</span>
+              <mat-icon mat-list-icon>open_in_new</mat-icon>
             </a>
-          </span>
-        </mat-list-item>
+          </mat-nav-list>
+        </mat-expansion-panel>
 
-        <mat-list-item *ngIf="fountain.properties.described_at_url.value !== null">
-          <!--add url for #131-->
-          <mat-icon mat-list-icon title="{{ propMeta['described_at_url'].name[lang] }}">link</mat-icon>
-          <a
-            mat-stroked-button
-            class="quicklink"
-            *ngFor="let url of fountain.properties['described_at_url'].value"
-            [href]="url"
-            target="_blank"
-            >{{ url.split('//')[1] | truncate: 20 }}</a
-          >
-        </mat-list-item>
-      </mat-list>
+        <!--show youtube video for #145-->
+        <mat-expansion-panel>
+          <mat-expansion-panel-header *ngIf="videoUrls.length">
+            <mat-icon class="marginright">video_library</mat-icon>&nbsp;<span translate>detail.youtube_videos</span>
+          </mat-expansion-panel-header>
+          <!--lazy load as of https://material.angular.io/components/expansion/overview#lazy-rendering-->
+          <ng-template matExpansionPanelContent>
+            <iframe
+              *ngFor="let url of videoUrls"
+              [src]="url"
+              width="300"
+              height="200"
+              frameborder="0"
+              webkitallowfullscreen
+              mozallowfullscreen
+              allowfullscreen
+            ></iframe>
+          </ng-template>
+        </mat-expansion-panel>
 
-      <!--Button and list added for #142 to show nearest public transport stops.
-      Only show for swiss cities as per https://github.com/water-fountains/proximap/issues/243#issuecomment-496823820-->
-      <mat-expansion-panel *ngIf="(city$ | async).split('-')[0] === 'ch'">
-        <mat-expansion-panel-header (click)="getNearestStations()" title="powered by transport.opendata.ch">
-          <mat-icon class="marginright">directions_transit</mat-icon>&nbsp;<span translate
-            >action.findNearestStations</span
-          >
-        </mat-expansion-panel-header>
-        <mat-nav-list>
-          <a
-            mat-list-item
-            target="_blank"
-            title="{{ 'action.showStationTimetable' | translate }}"
-            href="{{ getStationDepartureUrl(station.id) }}"
-            *ngFor="let station of nearestStations"
-          >
-            <span>{{ station.name }} ({{ station.distance }} m)</span>
-            <mat-icon mat-list-icon>open_in_new</mat-icon>
-          </a>
-        </mat-nav-list>
-      </mat-expansion-panel>
-
-      <!--show youtube video for #145-->
-      <mat-expansion-panel>
-        <mat-expansion-panel-header *ngIf="videoUrls.length">
-          <mat-icon class="marginright">video_library</mat-icon>&nbsp;<span translate>detail.youtube_videos</span>
-        </mat-expansion-panel-header>
-        <!--lazy load as of https://material.angular.io/components/expansion/overview#lazy-rendering-->
-        <ng-template matExpansionPanelContent>
-          <iframe
-            *ngFor="let url of videoUrls"
-            [src]="url"
-            width="300"
-            height="200"
-            frameborder="0"
-            webkitallowfullscreen
-            mozallowfullscreen
-            allowfullscreen
-          ></iframe>
-        </ng-template>
-      </mat-expansion-panel>
-
-      <mat-expansion-panel>
-        <mat-expansion-panel-header>
-          <mat-panel-title
-            ><mat-icon class="marginright">list</mat-icon>&nbsp;{{
-              ('detail.show_all_properties' | translate) + ' (' + propertyCount + ')'
-            }}</mat-panel-title
-          >
-        </mat-expansion-panel-header>
-        <mat-checkbox (change)="showindefinite = !showindefinite; filterTable()" [checked]="!showindefinite">
-          {{ ('detail.only_with_values' | translate) + ' (' + filteredPropertyCount + ')' }}
-        </mat-checkbox>
-        <table mat-table [dataSource]="tableProperties">
-          <ng-container matColumnDef="propName">
-            <td mat-cell *matCellDef="let p" [title]="propMeta[p.id].descriptions[lang]">
-              {{ propMeta[p.id].name[lang] }}
-            </td>
-          </ng-container>
-          <ng-container matColumnDef="propVal">
-            <td mat-cell *matCellDef="let p"><app-f-property [propMeta]="propMeta" [property]="p"></app-f-property></td>
-          </ng-container>
-          <tr mat-row *matRowDef="let row; columns: ['propName', 'propVal']"></tr>
-        </table>
-        <p>
-          <span>{{ 'property.merge_notes' | translate }}: {{ fountain.properties.conflation_info.merge_notes }}</span
-          ><br />
-          <span
-            >{{ 'property.merge_distance' | translate }}:
-            {{ fountain.properties.conflation_info.merge_distance | number: '1.2' }} m</span
-          ><br />
-          <!--add merge date info for datablue/#20-->
-          <span
-            >{{ 'property.merge_date' | translate }}:
-            {{ fountain.properties.conflation_info.merge_date | date: 'long' }}</span
-          ><br />
-        </p>
+        <mat-expansion-panel>
+          <mat-expansion-panel-header>
+            <mat-panel-title
+              ><mat-icon class="marginright">list</mat-icon>&nbsp;{{
+                ('detail.show_all_properties' | translate) + ' (' + propertyCount + ')'
+              }}</mat-panel-title
+            >
+          </mat-expansion-panel-header>
+          <mat-checkbox (change)="showindefinite = !showindefinite; filterTable()" [checked]="!showindefinite">
+            {{ ('detail.only_with_values' | translate) + ' (' + filteredPropertyCount + ')' }}
+          </mat-checkbox>
+          <table mat-table [dataSource]="tableProperties">
+            <ng-container matColumnDef="propName">
+              <td mat-cell *matCellDef="let p" [title]="propMeta[p.id].descriptions[lang]">
+                {{ propMeta[p.id].name[lang] }}
+              </td>
+            </ng-container>
+            <ng-container matColumnDef="propVal">
+              <td mat-cell *matCellDef="let p">
+                <app-f-property [propMeta]="propMeta" [property]="p"></app-f-property>
+              </td>
+            </ng-container>
+            <tr mat-row *matRowDef="let row; columns: ['propName', 'propVal']"></tr>
+          </table>
+          <p>
+            <span>{{ 'property.merge_notes' | translate }}: {{ fountain.properties.conflation_info.merge_notes }}</span
+            ><br />
+            <span
+              >{{ 'property.merge_distance' | translate }}:
+              {{ fountain.properties.conflation_info.merge_distance | number: '1.2' }} m</span
+            ><br />
+            <!--add merge date info for datablue/#20-->
+            <span
+              >{{ 'property.merge_date' | translate }}:
+              {{ fountain.properties.conflation_info.merge_date | date: 'long' }}</span
+            ><br />
+          </p>
 
-        <p translate>detail.how_to_refresh_message</p>
-      </mat-expansion-panel>
-    </mat-card-content>
-    <mat-card-actions>
-      <a
-        mat-mini-fab
-        color="accent"
-        *ngIf="issue_api_url"
-        href="{{ issue_api_url }}"
-        target="_blank"
-        [style.background-image]="'url(' + issue_api_img_url + ')'"
-        [style.background-size]="'cover'"
-        [title]="'action.report_issue_to_city' | translate"
-      >
-      </a>
-      <button mat-mini-fab color="accent" (click)="navigateToFountain()" [title]="'action.navigate' | translate">
-        <mat-icon>directions</mat-icon>
-      </button>
-      <button
-        mat-mini-fab
-        color="primary"
-        (click)="forceRefresh(fountain.properties.id_wikidata.value)"
-        [title]="
-          'action.refresh' | translate: { date: (fountain.properties.conflation_info.merge_date | date: 'long') }
-        "
-      >
-        <mat-icon>refresh</mat-icon>
-      </button>
-      <button mat-mini-fab color="primary" [matMenuTriggerFor]="linkMenu" title="Linked data">
-        <mat-icon>open_in_new</mat-icon>
-      </button>
-      <mat-menu #linkMenu="matMenu">
+          <p translate>detail.how_to_refresh_message</p>
+        </mat-expansion-panel>
+      </mat-card-content>
+      <mat-card-actions>
         <a
-          mat-menu-item
-          *ngFor="let quickLink of quickLinks"
-          [href]="quickLink.value"
-          title="{{ quickLink.title }}"
-          [class]="quickLink.styleClass"
+          mat-mini-fab
+          color="accent"
+          *ngIf="issue_api_url"
+          href="{{ issue_api_url }}"
           target="_blank"
-          ><mat-icon>open_in_new</mat-icon>{{ 'quicklink.' + quickLink.id | translate }}</a
+          [style.background-image]="'url(' + issue_api_img_url + ')'"
+          [style.background-size]="'cover'"
+          [title]="'action.report_issue_to_city' | translate"
         >
-      </mat-menu>
-      <button mat-mini-fab color="basic" (click)="returnToMap()">
-        <mat-icon>close</mat-icon>
-      </button>
-    </mat-card-actions>
-  </mat-card>
-</div>
+        </a>
+        <button mat-mini-fab color="accent" (click)="navigateToFountain()" [title]="'action.navigate' | translate">
+          <mat-icon>directions</mat-icon>
+        </button>
+        <button
+          mat-mini-fab
+          color="primary"
+          (click)="forceRefresh(fountain.properties.id_wikidata.value)"
+          [title]="
+            'action.refresh' | translate: { date: (fountain.properties.conflation_info.merge_date | date: 'long') }
+          "
+        >
+          <mat-icon>refresh</mat-icon>
+        </button>
+        <button mat-mini-fab color="primary" [matMenuTriggerFor]="linkMenu" title="Linked data">
+          <mat-icon>open_in_new</mat-icon>
+        </button>
+        <mat-menu #linkMenu="matMenu">
+          <a
+            mat-menu-item
+            *ngFor="let quickLink of quickLinks"
+            [href]="quickLink.value"
+            title="{{ quickLink.title }}"
+            [class]="quickLink.styleClass"
+            target="_blank"
+            ><mat-icon>open_in_new</mat-icon>{{ 'quicklink.' + quickLink.id | translate }}</a
+          >
+        </mat-menu>
+        <button mat-mini-fab color="basic" (click)="returnToMap()">
+          <mat-icon>close</mat-icon>
+        </button>
+      </mat-card-actions>
+    </mat-card>
+  </div>
+</ng-container>
diff --git a/src/app/detail/detail.component.ts b/src/app/detail/detail.component.ts
index 68db778e..77294b42 100644
--- a/src/app/detail/detail.component.ts
+++ b/src/app/detail/detail.component.ts
@@ -19,8 +19,10 @@ import { IAppState } from '../store';
 import { PropertyMetadata, PropertyMetadataCollection, QuickLink } from '../types';
 import { galleryOptions } from './detail.gallery.options';
 import * as consts from '../constants';
-import { Observable } from 'rxjs';
+import { combineLatest, Observable } from 'rxjs';
 import { City } from '../locations';
+import { LanguageService } from '../core/language.service';
+import { SubscriptionService } from '../core/subscription.service';
 const wm_cat_url_root = 'https://commons.wikimedia.org/wiki/Category:';
 
 const maxCaptionPartLgth = consts.maxWikiCiteLgth; // 150;
@@ -29,17 +31,16 @@ const maxCaptionPartLgth = consts.maxWikiCiteLgth; // 150;
   selector: 'app-detail',
   templateUrl: './detail.component.html',
   styleUrls: ['./detail.component.css'],
+  providers: [SubscriptionService],
 })
 export class DetailComponent implements OnInit {
   showImageCallToAction = true;
   fountain;
   public isMetadataLoaded = false;
   public propMeta: PropertyMetadataCollection = null;
-  @select('fountainSelected') fountain$;
+  @select('fountainSelected') fountain$: Observable<any>;
   @select() mode: Observable<string>;
   @select() city$: Observable<City | null>;
-  @select() lang$: Observable<string>;
-  lang = 'de';
   @select('userLocation') userLocation$;
   @Output() closeDetails = new EventEmitter<boolean>();
   showindefinite = true;
@@ -63,32 +64,13 @@ export class DetailComponent implements OnInit {
     id: '',
   };
 
-  closeDetailsEvent() {
-    this.closeDetails.emit();
-  }
-
-  filterTable() {
-    this.tableProperties.filter = this.showindefinite ? 'yes' : 'no';
-  }
-
-  public navigateToFountain() {
-    this.dataService.getDirections();
-  }
-
-  public returnToMap() {
-    this.ngRedux.dispatch({ type: CLOSE_DETAIL });
-  }
-
-  public forceRefresh(id: string) {
-    console.log('refreshing ' + id + ' ' + new Date().toISOString());
-    this.dataService.forceRefresh();
-  }
-
   constructor(
     private sanitizer: DomSanitizer,
     private ngRedux: NgRedux<IAppState>,
     private dataService: DataService,
-    private dialog: MatDialog
+    private dialog: MatDialog,
+    private languageService: LanguageService,
+    private subscriptionService: SubscriptionService
   ) {}
 
   ngOnInit(): void {
@@ -111,122 +93,145 @@ export class DetailComponent implements OnInit {
       };
 
       // update fountain
-      this.fountain$.subscribe(
-        f => {
-          try {
-            if (f !== null) {
-              this.fountain = f;
-              // determine which properties should be displayed in table
-              const fProps = f.properties;
-              let firstImg = null;
-              let cats = null;
-              let id = null;
-              let descShortTrLc = '';
-              let nameTrLc = '';
-              if (null != fProps) {
-                const gal = fProps.gallery;
-                if (null != gal) {
-                  const galV = gal.value;
-                  if (null != galV && 0 < galV.length) {
-                    firstImg = galV[0];
+      this.subscriptionService.registerSubscriptions(
+        combineLatest([this.fountain$, this.langObservable]).subscribe(
+          ([f, lang]) => {
+            try {
+              if (f !== null) {
+                this.fountain = f;
+                // determine which properties should be displayed in table
+                const fProps = f.properties;
+                let firstImg = null;
+                let cats = null;
+                let id = null;
+                let descShortTrLc = '';
+                let nameTrLc = '';
+                if (null != fProps) {
+                  const gal = fProps.gallery;
+                  if (null != gal) {
+                    const galV = gal.value;
+                    if (null != galV && 0 < galV.length) {
+                      firstImg = galV[0];
+                    }
+                  }
+                  const catArr = fProps.wiki_commons_name;
+                  if (null != catArr) {
+                    cats = catArr.value;
+                  }
+                  if (
+                    fProps.id_wikidata !== null &&
+                    fProps.id_wikidata !== 'null' &&
+                    null != fProps.id_wikidata.value
+                  ) {
+                    id = fProps.id_wikidata.value;
+                  } else if (fProps.id_osm !== null && fProps.id_osm !== 'null' && null != fProps.id_osm.value) {
+                    id = fProps.id_osm.value;
+                  }
+                  const dscShort = fProps[`description_short_${lang}`];
+                  if (null != dscShort && null != dscShort.value && 0 < dscShort.value.trim().length) {
+                    descShortTrLc = dscShort.value.trim().toLowerCase();
+                  }
+                  const namShort = fProps[`name_${lang}`];
+                  if (null != namShort && null != namShort.value && 0 < namShort.value.trim().length) {
+                    nameTrLc = namShort.value.trim().toLowerCase();
                   }
                 }
-                const catArr = fProps.wiki_commons_name;
-                if (null != catArr) {
-                  cats = catArr.value;
-                }
-                if (fProps.id_wikidata !== null && fProps.id_wikidata !== 'null' && null != fProps.id_wikidata.value) {
-                  id = fProps.id_wikidata.value;
-                } else if (fProps.id_osm !== null && fProps.id_osm !== 'null' && null != fProps.id_osm.value) {
-                  id = fProps.id_osm.value;
-                }
-                const dscShort = fProps[`description_short_${this.lang}`];
-                if (null != dscShort && null != dscShort.value && 0 < dscShort.value.trim().length) {
-                  descShortTrLc = dscShort.value.trim().toLowerCase();
-                }
-                const namShort = fProps[`name_${this.lang}`];
-                if (null != namShort && null != namShort.value && 0 < namShort.value.trim().length) {
-                  nameTrLc = namShort.value.trim().toLowerCase();
+                this.onImageChange(null, firstImg, cats, id, descShortTrLc, nameTrLc);
+                const list = _.filter(_.toArray(fProps), p => Object.prototype.hasOwnProperty.call(p, 'id'));
+                this.tableProperties.data = list;
+                this.propertyCount = list.length;
+                this.filteredPropertyCount = _.filter(list, p => p.value !== null).length;
+                this.filterTable();
+                // clear nearest public transportation stops #142
+                this.nearestStations = [];
+                // reset image call to action #136
+                this.showImageCallToAction = true;
+                // create quick links array
+                this.createQuicklinks(f);
+                // sanitize YouTube Urls
+                this.videoUrls = [];
+                if (fProps.youtube_video_id.value) {
+                  for (const id of fProps.youtube_video_id.value) {
+                    this.videoUrls.push(this.getYoutubeEmbedUrl(id));
+                  }
+                } else {
+                  console.log('no videoUrls ' + new Date().toISOString());
                 }
-              }
-              this.onImageChange(null, firstImg, cats, id, descShortTrLc, nameTrLc);
-              const list = _.filter(_.toArray(fProps), p => Object.prototype.hasOwnProperty.call(p, 'id'));
-              this.tableProperties.data = list;
-              this.propertyCount = list.length;
-              this.filteredPropertyCount = _.filter(list, p => p.value !== null).length;
-              this.filterTable();
-              // clear nearest public transportation stops #142
-              this.nearestStations = [];
-              // reset image call to action #136
-              this.showImageCallToAction = true;
-              // create quick links array
-              this.createQuicklinks(f);
-              // sanitize YouTube Urls
-              this.videoUrls = [];
-              if (fProps.youtube_video_id.value) {
-                for (const id of fProps.youtube_video_id.value) {
-                  this.videoUrls.push(this.getYoutubeEmbedUrl(id));
+                // update issue api
+                const cityMetadata = this.dataService.currentLocationsCollection;
+                if (
+                  cityMetadata?.issue_api.operator !== null &&
+                  cityMetadata?.issue_api.operator === fProps.operator_name.value
+                ) {
+                  console.log('cityMetadata.issue_api.operator !== null ' + new Date().toISOString());
+                  this.issue_api_img_url = cityMetadata.issue_api.thumbnail_url;
+                  this.issue_api_url = _.template(cityMetadata.issue_api.url_template)({
+                    lat: f.geometry.coordinates[1],
+                    lon: f.geometry.coordinates[0],
+                  });
+                } else {
+                  console.log('setting to null: issue_api_img_url, issue_api_url ' + new Date().toISOString());
+                  this.issue_api_img_url = null;
+                  this.issue_api_url = null;
                 }
-              } else {
-                console.log('no videoUrls ' + new Date().toISOString());
-              }
-              // update issue api
-              const cityMetadata = this.dataService.currentLocationsCollection;
-              if (
-                cityMetadata?.issue_api.operator !== null &&
-                cityMetadata?.issue_api.operator === fProps.operator_name.value
-              ) {
-                console.log('cityMetadata.issue_api.operator !== null ' + new Date().toISOString());
-                this.issue_api_img_url = cityMetadata.issue_api.thumbnail_url;
-                this.issue_api_url = _.template(cityMetadata.issue_api.url_template)({
-                  lat: f.geometry.coordinates[1],
-                  lon: f.geometry.coordinates[0],
-                });
-              } else {
-                console.log('setting to null: issue_api_img_url, issue_api_url ' + new Date().toISOString());
-                this.issue_api_img_url = null;
-                this.issue_api_url = null;
-              }
 
-              // // check if there is only one image in gallery, then hide thumbnails
-              // // does not work until
-              // https://github.com/lukasz-galka/ngx-gallery/issues/208 is fixed
-              // if(f.properties.gallery.value.length < 2){
-              // this.galleryOptions[0].thumbnailsRows = 0;
-              // this.galleryOptions[0].imagePercent = 100;
-              // this.galleryOptions[0].thumbnailsPercent = 0;
-              // }else{
-              // this.galleryOptions[0].thumbnailsRows = 1;
-              // this.galleryOptions[0].imagePercent = 80;
-              // this.galleryOptions[0].thumbnailsPercent = 20;
-              // }
+                // // check if there is only one image in gallery, then hide thumbnails
+                // // does not work until
+                // https://github.com/lukasz-galka/ngx-gallery/issues/208 is fixed
+                // if(f.properties.gallery.value.length < 2){
+                // this.galleryOptions[0].thumbnailsRows = 0;
+                // this.galleryOptions[0].imagePercent = 100;
+                // this.galleryOptions[0].thumbnailsPercent = 0;
+                // }else{
+                // this.galleryOptions[0].thumbnailsRows = 1;
+                // this.galleryOptions[0].imagePercent = 80;
+                // this.galleryOptions[0].thumbnailsPercent = 20;
+                // }
+              }
+              // eslint-disable-next-line @typescript-eslint/no-implicit-any-catch
+            } catch (err) {
+              console.trace('fountain update: ' + err.stack);
             }
-            // eslint-disable-next-line @typescript-eslint/no-implicit-any-catch
-          } catch (err) {
-            console.trace('fountain update: ' + err.stack);
+          },
+          err => {
+            console.log(`fountain update: ${err} - ${new Date().toISOString()}`);
           }
-        },
-        err => {
-          console.log(`fountain update: ${err} - ${new Date().toISOString()}`);
-        }
+        ),
+        this.mode.subscribe(mode => {
+          if (mode == 'map') {
+            this.closeDetails.emit();
+          }
+        })
       );
-
-      this.mode.subscribe(mode => {
-        if (mode == 'map') {
-          this.closeDetails.emit();
-        }
-      });
-
-      this.lang$.subscribe(l => {
-        if (l !== null) {
-          this.lang = l;
-        }
-      });
     } catch (err: unknown) {
       console.trace(err);
     }
   }
 
+  langObservable = this.languageService.langObservable;
+
+  //TODO @ralf.hauser, looks like this function is not used, correct?
+  closeDetailsEvent() {
+    this.closeDetails.emit();
+  }
+
+  filterTable() {
+    this.tableProperties.filter = this.showindefinite ? 'yes' : 'no';
+  }
+
+  navigateToFountain() {
+    this.dataService.getDirections();
+  }
+
+  returnToMap() {
+    this.ngRedux.dispatch({ type: CLOSE_DETAIL });
+  }
+
+  forceRefresh(id: string) {
+    console.log('refreshing ' + id + ' ' + new Date().toISOString());
+    this.dataService.forceRefresh();
+  }
+
   getNearestStations() {
     // Function to request nearest public transport station data and display it. created for #142
     // only perform request if it hasn't been done yet
@@ -242,7 +247,7 @@ export class DetailComponent implements OnInit {
     }
   }
 
-  getYoutubeEmbedUrl(id) {
+  private getYoutubeEmbedUrl(id) {
     return this.sanitizer.bypassSecurityTrustResourceUrl(`https://www.youtube.com/embed/${id}`);
   }
 
@@ -309,10 +314,10 @@ export class DetailComponent implements OnInit {
     }
   }
 
-  setCaption(img: any, wmd: any, dbg: string, descShortTrLc: string, nameTrLc: string) {
+  private setCaption(img: any, wmd: any, dbg: string, descShortTrLc: string, nameTrLc: string) {
     //https://github.com/water-fountains/proximap/issues/285
     let imgLinkAdded = false;
-    const claimFldNam = 'claim_' + this.lang;
+    const claimFldNam = 'claim_' + this.languageService.currentLang;
     if (Object.prototype.hasOwnProperty.call(img, claimFldNam)) {
       const claim = img[claimFldNam];
       if (null != claim) {
diff --git a/src/app/filter/filter.component.html b/src/app/filter/filter.component.html
index a9f7aac9..fade3771 100755
--- a/src/app/filter/filter.component.html
+++ b/src/app/filter/filter.component.html
@@ -4,7 +4,6 @@
 * Use of this code is governed by the GNU Affero General Public License (https://www.gnu.org/licenses/agpl-3.0)
 * and the profit contribution agreement available at https://www.my-d.org/ProfitContributionAgreement
 -->
-
 <mat-expansion-panel expanded class="filter-holder" *ngIf="isLoaded">
   <mat-expansion-panel-header>
     <mat-panel-title>
@@ -13,7 +12,7 @@
     </mat-panel-title>
   </mat-expansion-panel-header>
   <section class="filter-box">
-    <mat-form-field floatLabel="never" class="text-input">
+    <mat-form-field floatLabel="never" class="text-input" appearance="standard">
       <input
         matInput
         [(ngModel)]="filter.text"
@@ -87,7 +86,12 @@
 
     <!-- BINARY -->
     <div *ngFor="let property of ['potable', 'access_wheelchair', 'access_pet', 'access_bottle']">
-      <mat-checkbox [(ngModel)]="filter[property].active" (change)="updateFilters()">
+      <!-- TODO it would be better if we transform propMeta beforehand, also regarding fallback and such -->
+      <mat-checkbox
+        [(ngModel)]="filter[property].active"
+        (change)="updateFilters()"
+        *ngIf="langObservable | async; let lang"
+      >
         {{ propMeta[property].name[lang] }}
         <input
           type="checkbox"
diff --git a/src/app/filter/filter.component.ts b/src/app/filter/filter.component.ts
index a34c32be..4a794718 100755
--- a/src/app/filter/filter.component.ts
+++ b/src/app/filter/filter.component.ts
@@ -6,11 +6,11 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import { select } from '@angular-redux/store';
 import { FilterData, PropertyMetadataCollection } from '../types';
 import { DataService } from '../data.service';
 import { defaultFilter, WaterTypes } from '../constants';
 import _ from 'lodash';
+import { LanguageService } from '../core/language.service';
 
 @Component({
   selector: 'app-filter',
@@ -22,30 +22,19 @@ export class FilterComponent implements OnInit {
   isSubfilterOpen = false;
   public waterTypes = WaterTypes;
   public filter: FilterData = defaultFilter;
-  @select() lang$;
-  public lang: string;
   public propMeta: PropertyMetadataCollection;
   public dateMin: number;
   public dateMax: number;
 
-  log(val) {
-    console.log(val);
-  }
-  updateFilters() {
-    // for #115 - #118 additional filtering functions
-    this.dataService.filterFountains(this.filter);
-  }
-  constructor(private dataService: DataService) {}
+  constructor(private dataService: DataService, private languageService: LanguageService) {}
+
+  langObservable = this.languageService.langObservable;
+
   ngOnInit(): void {
     this.dataService.fetchPropertyMetadata().then(metadata => {
       this.propMeta = metadata;
       this.isLoaded = true;
     });
-    this.lang$.subscribe(l => {
-      if (l !== null) {
-        this.lang = l;
-      }
-    });
     this.dataService.fountainsLoadedSuccess.subscribe(fountains => {
       this.dateMin =
         (_.min(_.map(fountains.features, f => f.properties.construction_date)) || new Date().getFullYear()) - 1;
@@ -54,6 +43,11 @@ export class FilterComponent implements OnInit {
     });
   }
 
+  updateFilters() {
+    // for #115 - #118 additional filtering functions
+    this.dataService.filterFountains(this.filter);
+  }
+
   // Show/Hide more filters.
   openSubfilter() {
     this.isSubfilterOpen = !this.isSubfilterOpen;
diff --git a/src/app/fountain-property-badge/fountain-property-badge.component.html b/src/app/fountain-property-badge/fountain-property-badge.component.html
index 860a319d..ce6d8162 100644
--- a/src/app/fountain-property-badge/fountain-property-badge.component.html
+++ b/src/app/fountain-property-badge/fountain-property-badge.component.html
@@ -4,20 +4,25 @@
 * Use of this code is governed by the GNU Affero General Public License (https://www.gnu.org/licenses/agpl-3.0)
 * and the profit contribution agreement available at https://www.my-d.org/ProfitContributionAgreement
 -->
-<span
-  class="badge icon-small"
-  *ngIf="isLoaded && (showIfUndefined || property.value)"
-  [ngClass]="[property.type === 'boolean_string' ? property.value || 'undefined' : '', property.id]"
-  [title]="
-    propMeta[property.id].name[lang] +
-    ': ' +
-    (property.type !== 'number' ? (property.value || 'property.undefined' | translate) : property.value)
-  "
-  (click)="viewProperty()"
->
-  <mat-icon *ngIf="iconMap[property.id].type === 'material'">{{ iconMap[property.id].id }}</mat-icon>
-  <mat-icon *ngIf="iconMap[property.id].type === 'svg'" [svgIcon]="iconMap[property.id].id"></mat-icon>
-  <span *ngIf="['yes', 'no'].indexOf(property.value) < 0" translate>
-    {{ property.value }}
+<!-- TODO it would be better if we transform propMeta beforehand so that it has all the properties we need
+  (also regarding fallback) and we don't have to look them up via name[lang]
+-->
+<ng-container *ngIf="langObservable | async; let lang">
+  <span
+    class="badge icon-small"
+    *ngIf="isLoaded && (showIfUndefined || property.value)"
+    [ngClass]="[property.type === 'boolean_string' ? property.value || 'undefined' : '', property.id]"
+    [title]="
+      propMeta[property.id].name[lang] +
+      ': ' +
+      (property.type !== 'number' ? (property.value || 'property.undefined' | translate) : property.value)
+    "
+    (click)="viewProperty()"
+  >
+    <mat-icon *ngIf="iconMap[property.id].type === 'material'">{{ iconMap[property.id].id }}</mat-icon>
+    <mat-icon *ngIf="iconMap[property.id].type === 'svg'" [svgIcon]="iconMap[property.id].id"></mat-icon>
+    <span *ngIf="['yes', 'no'].indexOf(property.value) < 0" translate>
+      {{ property.value }}
+    </span>
   </span>
-</span>
+</ng-container>
diff --git a/src/app/fountain-property-badge/fountain-property-badge.component.ts b/src/app/fountain-property-badge/fountain-property-badge.component.ts
index caf61631..e09b468f 100644
--- a/src/app/fountain-property-badge/fountain-property-badge.component.ts
+++ b/src/app/fountain-property-badge/fountain-property-badge.component.ts
@@ -5,12 +5,13 @@
  * and the profit contribution agreement available at https://www.my-d.org/ProfitContributionAgreement
  */
 import { Component, Input, OnInit } from '@angular/core';
-import { NgRedux, select } from '@angular-redux/store';
+import { NgRedux } from '@angular-redux/store';
 import { SELECT_PROPERTY } from '../actions';
 import { IAppState } from '../store';
 import { propertyStatuses } from '../constants';
 import { PropertyMetadata, PropertyMetadataCollection } from '../types';
 import { DataService } from '../data.service';
+import { LanguageService } from '../core/language.service';
 
 @Component({
   selector: 'app-property-badge',
@@ -23,7 +24,6 @@ export class FountainPropertyBadgeComponent implements OnInit {
   WARN = propertyStatuses.warning;
   INFO = propertyStatuses.info;
   OK = propertyStatuses.ok;
-  @select('lang') lang$;
   public iconMap = {
     access_wheelchair: {
       id: 'accessible',
@@ -56,18 +56,20 @@ export class FountainPropertyBadgeComponent implements OnInit {
   };
   public propMeta: PropertyMetadataCollection;
   public isLoaded = false;
-  public lang: string;
 
-  constructor(private ngRedux: NgRedux<IAppState>, private dataService: DataService) {}
+  constructor(
+    private ngRedux: NgRedux<IAppState>,
+    private dataService: DataService,
+    private languageService: LanguageService
+  ) {}
+
+  public langObservable = this.languageService.langObservable;
 
   ngOnInit(): void {
     this.dataService.fetchPropertyMetadata().then(metadata => {
       this.propMeta = metadata;
       this.isLoaded = true;
     });
-    this.lang$.subscribe(l => {
-      if (l !== null) this.lang = l;
-    });
   }
 
   viewProperty(): void {
diff --git a/src/app/fountain-property-dialog/fountain-property-dialog.component.html b/src/app/fountain-property-dialog/fountain-property-dialog.component.html
index 1bff5da5..3b1a43c4 100644
--- a/src/app/fountain-property-dialog/fountain-property-dialog.component.html
+++ b/src/app/fountain-property-dialog/fountain-property-dialog.component.html
@@ -4,166 +4,174 @@
 * Use of this code is governed by the GNU Affero General Public License (https://www.gnu.org/licenses/agpl-3.0)
 * and the profit contribution agreement available at https://www.my-d.org/ProfitContributionAgreement
 -->
-<ng-container *ngIf="isLoaded">
-  <!--  TITLE -->
-  <div>
-    <span id="dialog-title">{{ metadata[(p | async).id].name[lang] }}</span
-    ><br />
-    <span id="dialog-subtitle">{{ metadata[(p | async).id].descriptions[lang] }}</span>
-  </div>
 
-  <mat-dialog-content>
-    <!--  PROPERTY SOURCE GRID  -->
-    <div id="sources">
-      <mat-card
-        class="source"
-        *ngFor="let source of ['wikidata', 'osm']"
-        [ngClass]="metadata[(p | async).id].src_config[source] === null ? 'prop_unavailable' : ''"
-      >
-        <mat-card-header>
-          <img mat-card-avatar [src]="'assets/icons/' + source + '.svg'" />
-          <mat-card-title>
-            <span class="source-name">{{ 'quicklink.id_' + source | translate }}</span>
-            <span class="chip-list"></span>
-            <span
-              class="chip primary"
-              [matTooltip]="'dialog.preferred_source' | translate"
-              matTooltipPosition="above"
-              *ngIf="source === metadata[(p | async).id].src_pref[0]"
-            >
-              {{ 'dialog.preferred_source_short' | translate }}
-            </span>
-            <span
-              class="chip accent"
-              [matTooltip]="'dialog.used_source' | translate"
-              matTooltipPosition="above"
-              *ngIf="source === (p | async).source"
-            >
-              {{ 'dialog.used_source_short' | translate }}
-            </span>
-          </mat-card-title>
-          <mat-card-subtitle>
-            <!--contribution tips for #122-->
-            <p *ngIf="metadata[(p | async).id].src_config[source] !== null">
-              <a
-                class="prop_wiki_link"
-                [matTooltip]="'dialog.see_source_wiki' | translate"
-                target="_blank"
+<!-- TODO it would be better if we transform metadata beforehand so that it has all the properties we need
+  (also regarding fallback) and we don't have to look them up via name[lang]
+-->
+<ng-container *ngIf="langObservable | async; let lang">
+  <ng-container *ngIf="isLoaded">
+    <!--  TITLE -->
+    <div>
+      <span id="dialog-title">{{ metadata[(p | async).id].name[lang] }}</span
+      ><br />
+      <span id="dialog-subtitle">{{ metadata[(p | async).id].descriptions[lang] }}</span>
+    </div>
+
+    <mat-dialog-content>
+      <!--  PROPERTY SOURCE GRID  -->
+      <div id="sources">
+        <mat-card
+          class="source"
+          *ngFor="let source of ['wikidata', 'osm']"
+          [ngClass]="metadata[(p | async).id].src_config[source] === null ? 'prop_unavailable' : ''"
+        >
+          <mat-card-header>
+            <img mat-card-avatar [src]="'assets/icons/' + source + '.svg'" />
+            <mat-card-title>
+              <span class="source-name">{{ 'quicklink.id_' + source | translate }}</span>
+              <span class="chip-list"></span>
+              <span
+                class="chip primary"
+                [matTooltip]="'dialog.preferred_source' | translate"
                 matTooltipPosition="above"
-                href="{{ getHelpUrl(source, (p | async).id) }}"
+                *ngIf="source === metadata[(p | async).id].src_pref[0]"
               >
-                {{ metadata[(p | async).id].src_config[source].src_instructions[lang].join(' > ') }}
-                <mat-icon inline>info</mat-icon>
-              </a>
+                {{ 'dialog.preferred_source_short' | translate }}
+              </span>
+              <span
+                class="chip accent"
+                [matTooltip]="'dialog.used_source' | translate"
+                matTooltipPosition="above"
+                *ngIf="source === (p | async).source"
+              >
+                {{ 'dialog.used_source_short' | translate }}
+              </span>
+            </mat-card-title>
+            <mat-card-subtitle>
+              <!--contribution tips for #122-->
+              <p *ngIf="metadata[(p | async).id].src_config[source] !== null">
+                <a
+                  class="prop_wiki_link"
+                  [matTooltip]="'dialog.see_source_wiki' | translate"
+                  target="_blank"
+                  matTooltipPosition="above"
+                  href="{{ getHelpUrl(source, (p | async).id) }}"
+                >
+                  {{ metadata[(p | async).id].src_config[source].src_instructions[lang].join(' > ') }}
+                  <mat-icon inline>info</mat-icon>
+                </a>
+              </p>
+              <!-- Alternative when no attribute is available-->
+              <p *ngIf="metadata[(p | async).id].src_config[source] === null">-</p>
+            </mat-card-subtitle>
+          </mat-card-header>
+          <mat-card-content>
+            <!--     SHOW WARNINGS     -->
+            <p class="comment warn" *ngIf="(p | async).sources[source].status === 'PROP_STATUS_FOUNTAIN_NOT_EXIST'">
+              {{ 'dialog.status.fountain_not_exist' | translate }}
             </p>
-            <!-- Alternative when no attribute is available-->
-            <p *ngIf="metadata[(p | async).id].src_config[source] === null">-</p>
-          </mat-card-subtitle>
-        </mat-card-header>
-        <mat-card-content>
-          <!--     SHOW WARNINGS     -->
-          <p class="comment warn" *ngIf="(p | async).sources[source].status === 'PROP_STATUS_FOUNTAIN_NOT_EXIST'">
-            {{ 'dialog.status.fountain_not_exist' | translate }}
-          </p>
-          <p class="comment warn" *ngIf="(p | async).sources[source].status === 'PROP_STATUS_NOT_AVAILABLE'">
-            {{ 'dialog.status.property_not_available' | translate }}
-          </p>
-          <!-- Show button to show fountain creation guide -->
-          <button
-            *ngIf="(p | async).sources[source].status === 'PROP_STATUS_FOUNTAIN_NOT_EXIST'"
-            mat-button
-            (click)="openGuide('fountain')"
-            color="accent"
-          >
-            <mat-icon inline>book</mat-icon>
-            {{ 'dialog.open_guide' | translate }}
-          </button>
-
-          <!--          Show values or absence of values-->
-          <div *ngIf="show_property_details[source]">
-            <!--     Show warning if fountain does not exist or if property does not exist for source     -->
-            <span *ngIf="!(f | async).properties['id_' + source].value">
-              {{ 'dialog.fountain_no_exist' | translate }}</span
-            >
-
-            <p *ngIf="metadata[(p | async).id].src_config[source].hasOwnProperty('src_info')">
-              {{ metadata[(p | async).id].src_config[source].src_info[lang] }}
+            <p class="comment warn" *ngIf="(p | async).sources[source].status === 'PROP_STATUS_NOT_AVAILABLE'">
+              {{ 'dialog.status.property_not_available' | translate }}
             </p>
-            <!-- raw source values -->
-            <mat-form-field
-              [matTooltip]="'value = ' + ((p | async).sources[source]['raw'] | json)"
-              appearance="outline"
-              matTooltipClass="code-tooltip"
-              matTooltipPosition="above"
-              [ngClass]="(p | async).sources[source].status === 'PROP_STATUS_NOT_DEFINED' ? 'warn' : ''"
+            <!-- Show button to show fountain creation guide -->
+            <button
+              *ngIf="(p | async).sources[source].status === 'PROP_STATUS_FOUNTAIN_NOT_EXIST'"
+              mat-button
+              (click)="openGuide('fountain')"
+              color="accent"
             >
-              <mat-label translate>dialog.data_raw</mat-label>
-              <input
-                matInput
-                readonly
-                [value]="
-                  (p | async).sources[source]['raw']
-                    ? ((p | async).sources[source]['raw'] | json)
-                    : ('property.undefined' | translate)
-                "
-              />
-              <a
-                mat-icon-button
-                color="primary"
-                target="_blank"
-                matSuffix
-                [matTooltip]="
-                  'dialog.edit_at_source'
-                    | translate
-                      : { property_name: metadata[(p | async).id].src_config[source].src_instructions[lang].join('>') }
-                "
-                href="{{ getUrl(source, (f | async).properties['id_' + source].value) }}"
+              <mat-icon inline>book</mat-icon>
+              {{ 'dialog.open_guide' | translate }}
+            </button>
+
+            <!--          Show values or absence of values-->
+            <div *ngIf="show_property_details[source]">
+              <!--     Show warning if fountain does not exist or if property does not exist for source     -->
+              <span *ngIf="!(f | async).properties['id_' + source].value">
+                {{ 'dialog.fountain_no_exist' | translate }}</span
               >
-                <mat-icon>edit</mat-icon>
-              </a> </mat-form-field
-            ><br />
 
-            <!-- Extracted values -->
-            <mat-form-field
-              [matTooltip]="'value = ' + ((p | async).sources[source]['extracted'] | json)"
-              appearance="outline"
-              matTooltipClass="code-tooltip"
-              matTooltipPosition="above"
-            >
-              <mat-label translate>dialog.data_extracted</mat-label>
-              <input
-                matInput
-                readonly
-                [value]="
-                  (p | async).sources[source]['extracted'] ? ((p | async).sources[source]['extracted'] | json) : '-'
-                "
-              />
-              <mat-icon
-                *ngIf="metadata[(p | async).id].src_config[source].hasOwnProperty('extraction_info')"
-                color="primary"
-                matSuffix
-                [matTooltip]="metadata[(p | async).id].src_config[source].extraction_info[lang]"
+              <p *ngIf="metadata[(p | async).id].src_config[source].hasOwnProperty('src_info')">
+                {{ metadata[(p | async).id].src_config[source].src_info[lang] }}
+              </p>
+              <!-- raw source values -->
+              <mat-form-field
+                [matTooltip]="'value = ' + ((p | async).sources[source]['raw'] | json)"
+                appearance="outline"
+                matTooltipClass="code-tooltip"
+                matTooltipPosition="above"
+                [ngClass]="(p | async).sources[source].status === 'PROP_STATUS_NOT_DEFINED' ? 'warn' : ''"
               >
-                info
-              </mat-icon>
-            </mat-form-field>
-          </div>
-        </mat-card-content>
-      </mat-card>
-    </div>
+                <mat-label translate>dialog.data_raw</mat-label>
+                <input
+                  matInput
+                  readonly
+                  [value]="
+                    (p | async).sources[source]['raw']
+                      ? ((p | async).sources[source]['raw'] | json)
+                      : ('property.undefined' | translate)
+                  "
+                />
+                <a
+                  mat-icon-button
+                  color="primary"
+                  target="_blank"
+                  matSuffix
+                  [matTooltip]="
+                    'dialog.edit_at_source'
+                      | translate
+                        : {
+                            property_name: metadata[(p | async).id].src_config[source].src_instructions[lang].join('>')
+                          }
+                  "
+                  href="{{ getUrl(source, (f | async).properties['id_' + source].value) }}"
+                >
+                  <mat-icon>edit</mat-icon>
+                </a> </mat-form-field
+              ><br />
+
+              <!-- Extracted values -->
+              <mat-form-field
+                [matTooltip]="'value = ' + ((p | async).sources[source]['extracted'] | json)"
+                appearance="outline"
+                matTooltipClass="code-tooltip"
+                matTooltipPosition="above"
+              >
+                <mat-label translate>dialog.data_extracted</mat-label>
+                <input
+                  matInput
+                  readonly
+                  [value]="
+                    (p | async).sources[source]['extracted'] ? ((p | async).sources[source]['extracted'] | json) : '-'
+                  "
+                />
+                <mat-icon
+                  *ngIf="metadata[(p | async).id].src_config[source].hasOwnProperty('extraction_info')"
+                  color="primary"
+                  matSuffix
+                  [matTooltip]="metadata[(p | async).id].src_config[source].extraction_info[lang]"
+                >
+                  info
+                </mat-icon>
+              </mat-form-field>
+            </div>
+          </mat-card-content>
+        </mat-card>
+      </div>
 
-    <ng-container *ngIf="(p | async).comments !== ''">
-      <p class="comment">{{ (p | async).comments }}</p>
-    </ng-container>
-  </mat-dialog-content>
-  <mat-dialog-actions>
-    <button mat-button color="basic" mat-dialog-close>
-      <mat-icon inline>close</mat-icon>
-      <span translate>action.close</span>
-    </button>
-    <button mat-button (click)="openGuide()" color="accent">
-      <mat-icon inline>book</mat-icon>
-      {{ 'dialog.open_guide' | translate }}
-    </button>
-  </mat-dialog-actions>
+      <ng-container *ngIf="(p | async).comments !== ''">
+        <p class="comment">{{ (p | async).comments }}</p>
+      </ng-container>
+    </mat-dialog-content>
+    <mat-dialog-actions>
+      <button mat-button color="basic" mat-dialog-close>
+        <mat-icon inline>close</mat-icon>
+        <span translate>action.close</span>
+      </button>
+      <button mat-button (click)="openGuide()" color="accent">
+        <mat-icon inline>book</mat-icon>
+        {{ 'dialog.open_guide' | translate }}
+      </button>
+    </mat-dialog-actions>
+  </ng-container>
 </ng-container>
diff --git a/src/app/fountain-property-dialog/fountain-property-dialog.component.ts b/src/app/fountain-property-dialog/fountain-property-dialog.component.ts
index feb98d60..1ad96702 100644
--- a/src/app/fountain-property-dialog/fountain-property-dialog.component.ts
+++ b/src/app/fountain-property-dialog/fountain-property-dialog.component.ts
@@ -10,6 +10,7 @@ import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import _ from 'lodash';
 import { DialogConfig } from '../constants';
+import { LanguageService } from '../core/language.service';
 import { DataService } from '../data.service';
 import { ImagesGuideComponent, NewFountainGuideComponent, PropertyGuideComponent } from '../guide/guide.component';
 import { illegalState } from '../shared/illegalState';
@@ -24,9 +25,7 @@ import { PropertyMetadataCollection } from '../types';
 export class FountainPropertyDialogComponent implements OnInit {
   @select('propertySelected') p;
   @select('fountainSelected') f;
-  @select('lang') lang$;
-  lang: string;
-  _: _;
+
   metadata: PropertyMetadataCollection;
   show_property_details = {
     osm: false,
@@ -48,14 +47,20 @@ export class FountainPropertyDialogComponent implements OnInit {
     'water_flow',
   ];
 
-  constructor(public dataService: DataService, private ngRedux: NgRedux<IAppState>, private dialog: MatDialog) {}
+  constructor(
+    public dataService: DataService,
+    private ngRedux: NgRedux<IAppState>,
+    private dialog: MatDialog,
+    private languageService: LanguageService
+  ) {}
+
+  langObservable = this.languageService.langObservable;
 
   ngOnInit(): void {
     this.dataService.fetchPropertyMetadata().then(metadata => {
       this.metadata = metadata;
       this.isLoaded = true;
     });
-    this.lang$.subscribe(l => (this.lang = l));
 
     // choose whether to show all details
     this.p.subscribe(p => {
diff --git a/src/app/fountain-property/fountain-property.component.ts b/src/app/fountain-property/fountain-property.component.ts
index 52e6e277..94e7e1bd 100644
--- a/src/app/fountain-property/fountain-property.component.ts
+++ b/src/app/fountain-property/fountain-property.component.ts
@@ -5,46 +5,50 @@
  * and the profit contribution agreement available at https://www.my-d.org/ProfitContributionAgreement
  */
 
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { NgRedux, select } from '@angular-redux/store';
 import { SELECT_PROPERTY } from '../actions';
 import { IAppState } from '../store';
 import { propertyStatuses } from '../constants';
 import { PropertyMetadata } from '../types';
 import { TranslateService } from '@ngx-translate/core';
+import { LanguageService } from '../core/language.service';
 
 @Component({
   selector: 'app-f-property',
   templateUrl: './fountain-property.component.html',
   styleUrls: ['./fountain-property.component.css'],
 })
-export class FountainPropertyComponent implements OnInit {
+export class FountainPropertyComponent {
   @Input() property: PropertyMetadata;
   @Input() propMeta: PropertyMetadata;
   @select('fountainSelected') f;
-  @select('lang') lang$;
-  lang: 'en' | 'fr' | 'de' | 'it' | 'tr' | 'sr' = 'en';
+
   WARN = propertyStatuses.warning;
   INFO = propertyStatuses.info;
   OK = propertyStatuses.ok;
   title = '';
 
-  constructor(private ngRedux: NgRedux<IAppState>, private translateService: TranslateService) {}
-
-  ngOnInit(): void {
-    this.lang$.subscribe(l => (this.lang = l));
-  }
+  constructor(
+    private ngRedux: NgRedux<IAppState>,
+    private translateService: TranslateService,
+    private languageService: LanguageService
+  ) {}
 
   viewProperty(): void {
     // let p = this.ngRedux.getState().fountainSelected.properties[this.pName];
     this.ngRedux.dispatch({ type: SELECT_PROPERTY, payload: this.property.id });
   }
 
+  // TODO @ralf.hauser: it is in general discouraged to use functions in templates as this needs to be
+  // recalculated for every template change, so over and over again where in this case it would suffice to
+  // calcuclate it once during onInit or such
   makeTitle() {
     // creates title string
     const texts = [];
     for (const src of this.propMeta[this.property.id].src_pref) {
-      const property_txt = this.propMeta[this.property.id].src_config[src].src_instructions[this.lang].join(' > ');
+      const property_txt =
+        this.propMeta[this.property.id].src_config[src].src_instructions[this.languageService.currentLang].join(' > ');
       texts.push(`${property_txt} in ${this.translateService.instant('quicklink.id_' + src)}`);
     }
     return texts.join(' or ');
diff --git a/src/app/guide/guide.component.ts b/src/app/guide/guide.component.ts
index e4d9abce..031ca43e 100644
--- a/src/app/guide/guide.component.ts
+++ b/src/app/guide/guide.component.ts
@@ -16,6 +16,7 @@ import { PropertyMetadataCollection } from '../types';
 
 import _ from 'lodash';
 import { SELECT_PROPERTY } from '../actions';
+import { LanguageService } from '../core/language.service';
 
 const property_dict = [
   {
@@ -88,19 +89,25 @@ const property_dict = [
 export class GuideSelectorComponent implements OnInit {
   @select('fountainSelected') fountain;
   @select('propertySelected') property;
-  @select() lang$;
   metadata: PropertyMetadataCollection = {};
   available_properties: string[];
   current_property_id: string;
   guides: string[] = ['images', 'name', 'fountain'];
 
-  constructor(private dialog: MatDialog, private ngRedux: NgRedux<IAppState>, private dataService: DataService) {
+  constructor(
+    private dialog: MatDialog,
+    private ngRedux: NgRedux<IAppState>,
+    private dataService: DataService,
+    private languageService: LanguageService
+  ) {
     this.dataService.fetchPropertyMetadata().then(metadata => {
       this.metadata = metadata;
       this.available_properties = _.map(this.metadata, 'id');
     });
   }
 
+  langObservable = this.languageService.langObservable;
+
   ngOnInit(): void {
     this.property.subscribe(p => {
       if (p) {
@@ -161,7 +168,7 @@ export class ImagesGuideComponent extends GuideSelectorComponent {}
 export class NewFountainGuideComponent extends GuideSelectorComponent {}
 
 @Component({
-  selector: 'app-fountain-guide',
+  selector: 'app-property-guide',
   styleUrls: ['./guide.component.css'],
   templateUrl: './property.guide.component.html',
 })
diff --git a/src/app/guide/images.guide.component.html b/src/app/guide/images.guide.component.html
index 233b36a0..395fa525 100644
--- a/src/app/guide/images.guide.component.html
+++ b/src/app/guide/images.guide.component.html
@@ -10,11 +10,10 @@
     <!--    <mat-icon inline >close</mat-icon>-->
     <span translate>action.close</span>
   </button>
-  <h3 id="fountain-name">
-    {{ (fountain | async).properties['name_' + (lang$ | async)].value }}
-    <span *ngIf="!(fountain | async).properties['name_' + (lang$ | async)].value">{{
-      'other.unnamed_fountain' | translate
-    }}</span>
+  <!-- TODO would be better if the properties are already translated including fallback etc. --- same same as for detail.component.html -->
+  <h3 id="fountain-name" *ngIf="langObservable | async; let lang">
+    {{ (fountain | async).properties['name_' + lang].value }}
+    <span *ngIf="!(fountain | async).properties['name_' + lang].value">{{ 'other.unnamed_fountain' | translate }}</span>
   </h3>
   <h2>Add one or more images</h2>
 </div>
diff --git a/src/app/guide/new-fountain.guide.component.html b/src/app/guide/new-fountain.guide.component.html
index 0f0a267b..3ad86eda 100644
--- a/src/app/guide/new-fountain.guide.component.html
+++ b/src/app/guide/new-fountain.guide.component.html
@@ -10,11 +10,10 @@
     <!--    <mat-icon inline >close</mat-icon>-->
     <span translate>action.close</span>
   </button>
-  <h3 id="fountain-name">
-    {{ (fountain | async).properties['name_' + (lang$ | async)].value }}
-    <span *ngIf="!(fountain | async).properties['name_' + (lang$ | async)].value">{{
-      'other.unnamed_fountain' | translate
-    }}</span>
+  <!-- TODO exact copy as in images.guide.component.html move to own component -->
+  <h3 id="fountain-name" *ngIf="langObservable | async; let lang">
+    {{ (fountain | async).properties['name_' + lang].value }}
+    <span *ngIf="!(fountain | async).properties['name_' + lang].value">{{ 'other.unnamed_fountain' | translate }}</span>
   </h3>
   <h2>Create a new fountain</h2>
 </div>
diff --git a/src/app/intro-window/intro-window.component.css b/src/app/intro-window/intro-window.component.css
index 941f0d16..d0135929 100644
--- a/src/app/intro-window/intro-window.component.css
+++ b/src/app/intro-window/intro-window.component.css
@@ -10,6 +10,7 @@
   background-size: 200px;
   height: 70px;
   width: 100%;
+  margin-bottom: 20px;
 }
 
 .never-show {
@@ -47,6 +48,3 @@ h3 {
   padding: 0.5em;
   white-space: normal !important;
 }
-
-:host {
-}
diff --git a/src/app/intro-window/intro-window.component.html b/src/app/intro-window/intro-window.component.html
index 50f3c21d..94d702fb 100644
--- a/src/app/intro-window/intro-window.component.html
+++ b/src/app/intro-window/intro-window.component.html
@@ -7,7 +7,7 @@
 
 <div class="logo"></div>
 <div class="actions">
-  <app-state-selector class="compact" controlVariable="lang" [options]="publicSharedConsts.LANGS"></app-state-selector>
+  <app-lang-select></app-lang-select>
 </div>
 
 <p translate>intro.intro-text</p>
diff --git a/src/app/issue-indicator/issue-indicator.component.ts b/src/app/issue-indicator/issue-indicator.component.ts
index 8e597498..a914841c 100644
--- a/src/app/issue-indicator/issue-indicator.component.ts
+++ b/src/app/issue-indicator/issue-indicator.component.ts
@@ -20,10 +20,9 @@ import { IAppState } from '../store';
 export class IssueIndicatorComponent {
   @select('dataIssues') dataIssues$;
   @select('appErrors') appErrors$;
-  @select('lang') lang$;
 
   constructor(private ngRedux: NgRedux<IAppState>, private dialog: MatDialog) {
-    //ngRedux is used implicitly via select, this is only for the compiler
+    //ngRedux is used implicitly via select, this is only for the compiler - I guess we could already remove it but I keep it to avoid unnecessary side effects (of the removal)
     this.ngRedux.getState();
   }
 
diff --git a/src/app/issue-list/issue-list.component.ts b/src/app/issue-list/issue-list.component.ts
index 8896ef10..67b3f8d8 100644
--- a/src/app/issue-list/issue-list.component.ts
+++ b/src/app/issue-list/issue-list.component.ts
@@ -19,7 +19,6 @@ import { AppError, DataIssue } from '../types';
 export class IssueListComponent {
   @select('dataIssues') dataIssues$: Observable<DataIssue[]>;
   @select('appErrors') appErrors$: Observable<AppError[]>;
-  @select('lang') lang$: Observable<string>;
   @select('city') city$: Observable<City | null>;
   // issue_count:number;
 }
diff --git a/src/app/list/list.component.html b/src/app/list/list.component.html
index 1cb90d0f..429df903 100644
--- a/src/app/list/list.component.html
+++ b/src/app/list/list.component.html
@@ -4,80 +4,85 @@
 * Use of this code is governed by the GNU Affero General Public License (https://www.gnu.org/licenses/agpl-3.0)
 * and the profit contribution agreement available at https://www.my-d.org/ProfitContributionAgreement
 -->
-<div class="list-holder" (mouseleave)="highlightFountain(null)" *ngIf="isLoaded">
-  <!-- for #114-->
-  <div class="list-stats-message">
-    <span translate [translateParams]="{ visible: filtered_fountain_count, total: total_fountain_count }"
-      >list.showing<br />
-    </span>
-  </div>
-  <mat-card
-    class="fountain-list-element"
-    style="list-style: none"
-    disableRipple="false"
-    *ngFor="let fountain of fountains | slice: 0:100"
-    (mouseover)="device.valueOf() === 'desktop' ? highlightFountain(fountain) : {}"
-    (click)="dataService.selectFountainByFeature(fountain)"
-    [title]="getIdFnt(fountain)"
-  >
-    <h4>
-      <span class="ftn-icon potable" [ngClass]="fountain.properties.potable"></span>
-      <span title="{{ fountain.properties['name_' + lang] }}">{{
-        fountain.properties['name_' + lang] | truncate
-      }}</span>
-      <span *ngIf="!fountain.properties.name">{{ 'other.unnamed_fountain' | translate }}</span>
-      <span title="{{ (fountain.properties.distanceFromUser * 1000).toFixed(0) }}m">{{
-        getDistSignificantIss219(fountain)
-      }}</span>
-    </h4>
-    <p>
-      <span
-        class="badge icon-small potable"
-        [ngClass]="fountain.properties.potable"
-        *ngIf="fountain.properties.potable"
-        title="{{ propMeta['potable'].name[lang] }}"
-        ><mat-icon svgIcon="cup"></mat-icon
-      ></span>
-      <span
-        class="badge year"
-        *ngIf="fountain.properties.construction_date"
-        title="{{ propMeta['construction_date'].name[lang] }}"
-      >
-        <span>{{ fountain.properties.construction_date }}</span>
-      </span>
-      <span class="badge" *ngIf="fountain.properties.water_type" title="{{ propMeta['water_type'].name[lang] }}">
-        {{ fountain.properties.water_type | translate }}
+<!-- TODO it would be better if we transform fountain beforehand so that it has all the properties we need
+  (also regarding fallback) and we don't have to look them up via key + lang
+-->
+<ng-container *ngIf="langObservable | async; let lang">
+  <div class="list-holder" (mouseleave)="highlightFountain(null)" *ngIf="isLoaded">
+    <!-- for #114-->
+    <div class="list-stats-message">
+      <span translate [translateParams]="{ visible: filtered_fountain_count, total: total_fountain_count }"
+        >list.showing<br />
       </span>
-      <span
-        class="badge icon-small"
-        [ngClass]="fountain.properties.access_wheelchair"
-        *ngIf="fountain.properties.access_wheelchair"
-        title="{{ propMeta['access_wheelchair'].name[lang] }}"
-        ><mat-icon>accessible</mat-icon></span
-      >
-      <span
-        class="badge icon-small"
-        [ngClass]="fountain.properties.access_pet"
-        *ngIf="fountain.properties.access_pet"
-        title="{{ propMeta['access_pet'].name[lang] }}"
-        ><mat-icon>pets</mat-icon></span
-      >
-      <span
-        class="badge icon-small"
-        [ngClass]="fountain.properties.access_bottle"
-        *ngIf="fountain.properties.access_bottle"
-        title="{{ propMeta['access_bottle'].name[lang] }}"
-        ><mat-icon svgIcon="bottle"></mat-icon
-      ></span>
-      <span
-        class="badge icon-small"
-        [ngClass]="fountain.properties.swimming_place"
-        *ngIf="fountain.properties.swimming_place"
-        title="{{ propMeta['swimming_place'].name[lang] }}"
-        ><mat-icon svgIcon="swimming_place"></mat-icon
-      ></span>
-    </p>
-  </mat-card>
-  <!--todo: show message at end of list, a call to add a fountain if you did not find it-->
-  <!--<a translate href="#">list.report_missing</a>-->
-</div>
+    </div>
+    <mat-card
+      class="fountain-list-element"
+      style="list-style: none"
+      disableRipple="false"
+      *ngFor="let fountain of fountains | slice: 0:100"
+      (mouseover)="device.valueOf() === 'desktop' ? highlightFountain(fountain) : {}"
+      (click)="dataService.selectFountainByFeature(fountain)"
+      [title]="getIdFnt(fountain)"
+    >
+      <h4>
+        <span class="ftn-icon potable" [ngClass]="fountain.properties.potable"></span>
+        <span title="{{ fountain.properties['name_' + lang] }}">{{
+          fountain.properties['name_' + lang] | truncate
+        }}</span>
+        <span *ngIf="!fountain.properties.name">{{ 'other.unnamed_fountain' | translate }}</span>
+        <span title="{{ (fountain.properties.distanceFromUser * 1000).toFixed(0) }}m">{{
+          getDistSignificantIss219(fountain)
+        }}</span>
+      </h4>
+      <p>
+        <span
+          class="badge icon-small potable"
+          [ngClass]="fountain.properties.potable"
+          *ngIf="fountain.properties.potable"
+          title="{{ propMeta['potable'].name[lang] }}"
+          ><mat-icon svgIcon="cup"></mat-icon
+        ></span>
+        <span
+          class="badge year"
+          *ngIf="fountain.properties.construction_date"
+          title="{{ propMeta['construction_date'].name[lang] }}"
+        >
+          <span>{{ fountain.properties.construction_date }}</span>
+        </span>
+        <span class="badge" *ngIf="fountain.properties.water_type" title="{{ propMeta['water_type'].name[lang] }}">
+          {{ fountain.properties.water_type | translate }}
+        </span>
+        <span
+          class="badge icon-small"
+          [ngClass]="fountain.properties.access_wheelchair"
+          *ngIf="fountain.properties.access_wheelchair"
+          title="{{ propMeta['access_wheelchair'].name[lang] }}"
+          ><mat-icon>accessible</mat-icon></span
+        >
+        <span
+          class="badge icon-small"
+          [ngClass]="fountain.properties.access_pet"
+          *ngIf="fountain.properties.access_pet"
+          title="{{ propMeta['access_pet'].name[lang] }}"
+          ><mat-icon>pets</mat-icon></span
+        >
+        <span
+          class="badge icon-small"
+          [ngClass]="fountain.properties.access_bottle"
+          *ngIf="fountain.properties.access_bottle"
+          title="{{ propMeta['access_bottle'].name[lang] }}"
+          ><mat-icon svgIcon="bottle"></mat-icon
+        ></span>
+        <span
+          class="badge icon-small"
+          [ngClass]="fountain.properties.swimming_place"
+          *ngIf="fountain.properties.swimming_place"
+          title="{{ propMeta['swimming_place'].name[lang] }}"
+          ><mat-icon svgIcon="swimming_place"></mat-icon
+        ></span>
+      </p>
+    </mat-card>
+    <!--todo: show message at end of list, a call to add a fountain if you did not find it-->
+    <!--<a translate href="#">list.report_missing</a>-->
+  </div>
+</ng-container>
diff --git a/src/app/list/list.component.ts b/src/app/list/list.component.ts
index 92d64d5a..2cd8476d 100644
--- a/src/app/list/list.component.ts
+++ b/src/app/list/list.component.ts
@@ -12,6 +12,7 @@ import { DeviceMode, PropertyMetadataCollection } from '../types';
 import { Feature } from 'geojson';
 import { getId } from '../database.service';
 import { BehaviorSubject } from 'rxjs';
+import { LanguageService } from '../core/language.service';
 @Component({
   selector: 'app-list',
   templateUrl: './list.component.html',
@@ -22,14 +23,16 @@ export class ListComponent implements OnInit {
   isLoaded = false;
   propMeta: PropertyMetadataCollection = null;
   public fountains: Feature[] = [];
-  @select() lang$;
+
   @select() device$;
   @select() fountainSelected$;
   device: BehaviorSubject<DeviceMode> = new BehaviorSubject<DeviceMode>('mobile');
-  lang = 'de';
+
   total_fountain_count = 0;
 
-  constructor(public dataService: DataService) {}
+  constructor(public dataService: DataService, private languageService: LanguageService) {}
+
+  langObservable = this.languageService.langObservable;
 
   ngOnInit(): void {
     // watch for device type changes
@@ -51,11 +54,6 @@ export class ListComponent implements OnInit {
         this.filtered_fountain_count = 0;
       }
     });
-    this.lang$.subscribe(l => {
-      if (l !== null) {
-        this.lang = l;
-      }
-    });
     this.device$.subscribe(d => {
       if (d !== null) {
         this.device = d;
diff --git a/src/app/map/map.component.ts b/src/app/map/map.component.ts
index 191a63c6..a383fbea 100644
--- a/src/app/map/map.component.ts
+++ b/src/app/map/map.component.ts
@@ -14,6 +14,7 @@ import { BehaviorSubject, Observable } from 'rxjs';
 import { EMPTY_LINESTRING } from '../../assets/defaultData';
 import { environment } from '../../environments/environment';
 import { SET_USER_LOCATION } from '../actions';
+import { LanguageService } from '../core/language.service';
 import { DataService } from '../data.service';
 import { City } from '../locations';
 import { IAppState } from '../store';
@@ -38,7 +39,6 @@ export class MapComponent implements OnInit {
   private satelliteShown = false;
   @select() showList;
   @select() mode$: Observable<string>;
-  @select() lang$: Observable<string>;
   @select() city$: Observable<City | null>;
   @select() device$;
   device: BehaviorSubject<DeviceMode> = new BehaviorSubject<DeviceMode>('mobile');
@@ -49,135 +49,12 @@ export class MapComponent implements OnInit {
 
   constructor(
     private dataService: DataService,
-    private mc: MapConfig,
-    private translate: TranslateService,
+    private mapConfig: MapConfig,
+    private translateService: TranslateService,
+    private languageService: LanguageService,
     private ngRedux: NgRedux<IAppState>
   ) {}
 
-  setUserLocation(coordinates) {
-    this.ngRedux.dispatch({ type: SET_USER_LOCATION, payload: coordinates });
-  }
-
-  zoomToFountain() {
-    if (this._selectedFountain !== null) {
-      this.map.flyTo({
-        center: this._selectedFountain.geometry.coordinates,
-        zoom: this.mc.map.maxZoom,
-        pitch: 55,
-        bearing: 40,
-        maxDuration: 2500,
-        offset: [0, -180],
-      });
-    }
-  }
-
-  // Zoom to city bounds (only if current map bounds are outside of new city's bounds)
-  zoomToCity(city: City): void {
-    const options = {
-      maxDuration: 500,
-      pitch: 0,
-      bearing: 0,
-    };
-
-    this.dataService
-      .getLocationBounds(city)
-      .then(bounds => {
-        const waiting = () => {
-          if (!this.map.isStyleLoaded()) {
-            setTimeout(waiting, 200);
-          } else {
-            if (this._mode === 'map')
-              // only refit city bounds if not zoomed into a fountain
-              this.map.fitBounds(bounds, options);
-          }
-        };
-        waiting();
-      })
-      .catch(err => console.log(err));
-  }
-
-  zoomOut() {
-    this.map.flyTo({
-      zoom: this.mc.map.zoomAfterDetail,
-      pitch: this.mc.map.pitch,
-      bearing: 0,
-      maxDuration: 2500,
-    });
-  }
-
-  initializeMap() {
-    // Create map
-    M.accessToken = environment.mapboxApiKey;
-    this.map = new M.Map(
-      Object.assign(this.mc.map, {
-        container: 'map',
-      })
-    ).on('load', () => {
-      // zoom to city
-      // this.zoomToCity(this.ngRedux.getState().city);
-    });
-
-    // Add navigation control to map
-    this.navControl = new M.NavigationControl({
-      showCompass: true,
-    });
-    this.map.addControl(this.navControl, 'top-left');
-
-    // Add geolocate control to the map.
-    this.geolocator = new M.GeolocateControl({
-      positionOptions: {
-        enableHighAccuracy: true,
-      },
-      fitBoundsOptions: {
-        maxZoom: this.mc.map.maxZoom,
-      },
-      trackUserLocation: false,
-    });
-    this.map.addControl(this.geolocator);
-
-    this.geolocator.on('geolocate', position => {
-      this.setUserLocation([position.coords.longitude, position.coords.latitude]);
-    });
-
-    // highlight popup
-    this.highlightPopup = new M.Popup({
-      closeButton: false,
-      closeOnClick: false,
-      offset: 10,
-    });
-
-    // popup for selected fountain
-    this.selectPopup = new M.Popup({
-      closeButton: false,
-      closeOnClick: false,
-      offset: 10,
-    });
-
-    // // directions control
-    // this.directions = new MapboxDirections({
-    //   accessToken: environment.mapboxApiKey,
-    //   unit: 'metric',
-    //   profile: 'mapbox/walking',
-    //   interactive: false,
-    //   controls: {
-    //     inputs: false
-    //   }
-    // });
-
-    // user marker
-    const el = document.createElement('div');
-    el.className = 'userMarker';
-    el.style.backgroundImage = 'url(/assets/user_icon.png)';
-    el.style.backgroundSize = 'cover';
-    el.style.backgroundPosition = 'center';
-    el.style.backgroundRepeat = 'no-repeat';
-    el.style.boxShadow = 'box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);';
-    el.style.width = '30px';
-    el.style.height = '37px';
-    el.style.top = '-15px';
-    this.userMarker = new M.Marker(el);
-  }
-
   ngOnInit(): void {
     this.initializeMap();
 
@@ -207,8 +84,8 @@ export class MapComponent implements OnInit {
     });
 
     // when the language is changed, update popups
-    this.lang$.subscribe(() => {
-      console.log('lang "' + this.lang$ + '", mode ' + this._mode + ' ' + new Date().toISOString());
+    this.languageService.langObservable.subscribe(lang => {
+      console.log('lang "' + lang + '", mode ' + this._mode + ' ' + new Date().toISOString());
       if (this._mode !== 'map') {
         this.showSelectedPopupOnMap();
       }
@@ -296,6 +173,130 @@ export class MapComponent implements OnInit {
     });
   }
 
+  private setUserLocation(coordinates) {
+    this.ngRedux.dispatch({ type: SET_USER_LOCATION, payload: coordinates });
+  }
+
+  private zoomToFountain() {
+    if (this._selectedFountain !== null) {
+      this.map.flyTo({
+        center: this._selectedFountain.geometry.coordinates,
+        zoom: this.mapConfig.map.maxZoom,
+        pitch: 55,
+        bearing: 40,
+        maxDuration: 2500,
+        offset: [0, -180],
+      });
+    }
+  }
+
+  // Zoom to city bounds (only if current map bounds are outside of new city's bounds)
+  private zoomToCity(city: City): void {
+    const options = {
+      maxDuration: 500,
+      pitch: 0,
+      bearing: 0,
+    };
+
+    this.dataService
+      .getLocationBounds(city)
+      .then(bounds => {
+        const waiting = () => {
+          if (!this.map.isStyleLoaded()) {
+            setTimeout(waiting, 200);
+          } else {
+            if (this._mode === 'map')
+              // only refit city bounds if not zoomed into a fountain
+              this.map.fitBounds(bounds, options);
+          }
+        };
+        waiting();
+      })
+      .catch(err => console.log(err));
+  }
+
+  private zoomOut() {
+    this.map.flyTo({
+      zoom: this.mapConfig.map.zoomAfterDetail,
+      pitch: this.mapConfig.map.pitch,
+      bearing: 0,
+      maxDuration: 2500,
+    });
+  }
+
+  initializeMap() {
+    // Create map
+    M.accessToken = environment.mapboxApiKey;
+    this.map = new M.Map(
+      Object.assign(this.mapConfig.map, {
+        container: 'map',
+      })
+    ).on('load', () => {
+      // zoom to city
+      // this.zoomToCity(this.ngRedux.getState().city);
+    });
+
+    // Add navigation control to map
+    this.navControl = new M.NavigationControl({
+      showCompass: true,
+    });
+    this.map.addControl(this.navControl, 'top-left');
+
+    // Add geolocate control to the map.
+    this.geolocator = new M.GeolocateControl({
+      positionOptions: {
+        enableHighAccuracy: true,
+      },
+      fitBoundsOptions: {
+        maxZoom: this.mapConfig.map.maxZoom,
+      },
+      trackUserLocation: false,
+    });
+    this.map.addControl(this.geolocator);
+
+    this.geolocator.on('geolocate', position => {
+      this.setUserLocation([position.coords.longitude, position.coords.latitude]);
+    });
+
+    // highlight popup
+    this.highlightPopup = new M.Popup({
+      closeButton: false,
+      closeOnClick: false,
+      offset: 10,
+    });
+
+    // popup for selected fountain
+    this.selectPopup = new M.Popup({
+      closeButton: false,
+      closeOnClick: false,
+      offset: 10,
+    });
+
+    // // directions control
+    // this.directions = new MapboxDirections({
+    //   accessToken: environment.mapboxApiKey,
+    //   unit: 'metric',
+    //   profile: 'mapbox/walking',
+    //   interactive: false,
+    //   controls: {
+    //     inputs: false
+    //   }
+    // });
+
+    // user marker
+    const el = document.createElement('div');
+    el.className = 'userMarker';
+    el.style.backgroundImage = 'url(/assets/user_icon.png)';
+    el.style.backgroundSize = 'cover';
+    el.style.backgroundPosition = 'center';
+    el.style.backgroundRepeat = 'no-repeat';
+    el.style.boxShadow = 'box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);';
+    el.style.width = '30px';
+    el.style.height = '37px';
+    el.style.top = '-15px';
+    this.userMarker = new M.Marker(el);
+  }
+
   getId(fountain: Feature<any>) {
     const prop = fountain.properties;
     if (null != prop.id_wikidata) {
@@ -317,8 +318,10 @@ export class MapComponent implements OnInit {
       // move to location
       this.highlightPopup.setLngLat(fountain.geometry.coordinates);
       //set popup content
-      let name = fountain.properties['name_' + this.ngRedux.getState().lang];
-      name = !name || name == 'null' ? this.translate.instant('other.unnamed_fountain') : name;
+      let name = fountain.properties['name_' + this.languageService.currentLang];
+      // TODO @ralf.hauser, using instant will have the effect that it is not translated if a user changes the language
+      // might be it does not matter in this specific case but could be a bug
+      name = !name || name == 'null' ? this.translateService.instant('other.unnamed_fountain') : name;
       const phot = fountain.properties.photo;
       let popUpHtml = `<h3>${name}</h3>`;
       if (phot == null) {
@@ -344,14 +347,14 @@ export class MapComponent implements OnInit {
     }
   }
 
-  removeDirections() {
+  private removeDirections() {
     EMPTY_LINESTRING.features[0].geometry.coordinates = [];
     if (this.map.getSource('navigation-line')) {
       this.map.getSource('navigation-line').setData(EMPTY_LINESTRING);
     }
   }
 
-  showSelectedPopupOnMap() {
+  private showSelectedPopupOnMap() {
     if (this._selectedFountain !== null) {
       // hide popup
       this.selectPopup.remove();
@@ -360,8 +363,10 @@ export class MapComponent implements OnInit {
       this.selectPopup.setLngLat(this._selectedFountain.geometry.coordinates);
       //set popup content
       const fountainTitle =
-        this._selectedFountain.properties['name_' + this.ngRedux.getState().lang].value ||
-        this.translate.instant('other.unnamed_fountain');
+        this._selectedFountain.properties['name_' + this.languageService.currentLang].value ||
+        // TODO @ralf.hauser, using instant will have the effect that it is not translated if a user changes the language
+        // might be it does not matter in this specific case but could be a bug
+        this.translateService.instant('other.unnamed_fountain');
       this.selectPopup.setHTML(`<h3>${fountainTitle}</h3>`);
       this.selectPopup.addTo(this.map);
     }
diff --git a/src/app/mobile-menu/mobile-menu.component.html b/src/app/mobile-menu/mobile-menu.component.html
index c369bae7..131bbba8 100644
--- a/src/app/mobile-menu/mobile-menu.component.html
+++ b/src/app/mobile-menu/mobile-menu.component.html
@@ -5,7 +5,7 @@
 * and the profit contribution agreement available at https://www.my-d.org/ProfitContributionAgreement
 -->
 
-<mat-tab-group>
+<mat-tab-group *ngIf="langObservable | async; let lang">
   <mat-tab class="tab-content" label="{{ 'menu.tab_info' | translate }}">
     <div class="tab-content">
       <div class="logo"></div>
@@ -23,14 +23,12 @@ <h2 translate>intro.legend-title</h2>
       <!--   Add city-specific info for https://github.com/water-fountains/proximap/issues/277   -->
       <div
         *ngIf="locationsCollection !== null && (city$ | async)"
-        [innerHTML]="locationsCollection[city$ | async].description[lang$ | async]"
+        [innerHTML]="locationsCollection[city$ | async].description[lang]"
       ></div>
       <mat-expansion-panel
         class="mat-elevation-z0"
         *ngIf="
-          locationsCollection !== null &&
-          (city$ | async) &&
-          locationsCollection[city$ | async].description_more[lang$ | async]
+          locationsCollection !== null && (city$ | async) && locationsCollection[city$ | async].description_more[lang]
         "
       >
         <mat-expansion-panel-header>
@@ -38,7 +36,7 @@ <h2 translate>intro.legend-title</h2>
             {{ 'action.more' | translate }}
           </mat-panel-title>
         </mat-expansion-panel-header>
-        <div [innerHTML]="locationsCollection[city$ | async].description_more[lang$ | async]"></div>
+        <div [innerHTML]="locationsCollection[city$ | async].description_more[lang]"></div>
       </mat-expansion-panel>
 
       <h2 translate>intro.disclaimer-title</h2>
@@ -79,15 +77,11 @@ <h3 translate>intro.similar-title</h3>
   <mat-tab class="tab-content" label="{{ 'menu.tab_settings' | translate }}">
     <div class="tab-content">
       <h3>{{ 'settings.lang' | translate }}</h3>
-      <app-state-selector
-        class="full-size"
-        controlVariable="lang"
-        [options]="publicSharedConsts.LANGS"
-      ></app-state-selector>
+      <app-lang-select class="full-size"></app-lang-select>
       <h3>{{ 'settings.city' | translate }}</h3>
       <app-state-selector class="full-size" controlVariable="city" [options]="cities"></app-state-selector>
       <p>
-        {{ 'settings.city_last_scan' | translate }}: {{ last_scan | date: 'long':'':(lang$ | async) }}.
+        {{ 'settings.city_last_scan' | translate }}: {{ last_scan | date: 'long':'':lang }}.
         {{ 'settings.city_next_scan_info' | translate }} {{ publicSharedConsts?.CACHE_FOR_HRS_i45db }}
       </p>
       <button class="mat-stroked-button responsive" (click)="refreshCurrentLocationData(); toggleMenu(false)">
diff --git a/src/app/mobile-menu/mobile-menu.component.ts b/src/app/mobile-menu/mobile-menu.component.ts
index f67dcd2e..94992c1b 100644
--- a/src/app/mobile-menu/mobile-menu.component.ts
+++ b/src/app/mobile-menu/mobile-menu.component.ts
@@ -11,6 +11,7 @@ import _ from 'lodash';
 import { Observable } from 'rxjs';
 import { versions } from '../../environments/versions';
 import { TOGGLE_MENU } from '../actions';
+import { LanguageService } from '../core/language.service';
 import { DataService } from '../data.service';
 import { City, LocationsCollection } from '../locations';
 import { IAppState } from '../store';
@@ -23,7 +24,6 @@ import * as sharedConstants from './../../assets/shared-constants.json';
 })
 export class MobileMenuComponent implements OnInit {
   @select() device$;
-  @select('lang') lang$: Observable<string>;
   @select('city') city$: Observable<City | null>;
   @Output() menuToggle = new EventEmitter<boolean>();
   publicSharedConsts = sharedConstants;
@@ -40,7 +40,13 @@ export class MobileMenuComponent implements OnInit {
   };
   public last_scan: Date = new Date();
 
-  constructor(private dataService: DataService, private ngRedux: NgRedux<IAppState>) {}
+  constructor(
+    private dataService: DataService,
+    private ngRedux: NgRedux<IAppState>,
+    private languageService: LanguageService
+  ) {}
+
+  langObservable = this.languageService.langObservable;
 
   toggleMenu(show: boolean): void {
     this.ngRedux.dispatch({ type: TOGGLE_MENU, payload: show });
diff --git a/src/app/navbar/navbar.component.css b/src/app/navbar/navbar.component.css
index 5230b2d8..f0cdc1a5 100644
--- a/src/app/navbar/navbar.component.css
+++ b/src/app/navbar/navbar.component.css
@@ -14,6 +14,7 @@
   background-size: 125px;
 }
 
+app-lang-select,
 app-state-selector {
   margin-right: 10px;
 }
@@ -27,6 +28,7 @@ app-state-selector {
 
 /* Hide settings if on small screen*/
 @media (max-width: 900px) {
+  app-lang-select,
   app-state-selector,
   app-issue-indicator {
     display: none;
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
index d8ef6f93..95f0363e 100644
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -18,16 +18,16 @@
   <span style="flex: 1 1 auto"></span>
 
   <ng-container *ngIf="(showMenu | async) === false">
-    <app-state-selector
-      class="compact"
-      controlVariable="lang"
-      [options]="publicSharedConsts.LANGS"
-    ></app-state-selector>
+    <div class="compact">
+      <app-lang-select></app-lang-select>
+    </div>
     <app-state-selector
       class="compact"
       controlVariable="city"
       [options]="cities"
-      [tooltipText]="('settings.city_last_scan' | translate) + ': ' + (last_scan | date: 'long':'':(lang$ | async))"
+      [tooltipText]="
+        ('settings.city_last_scan' | translate) + ': ' + (last_scan | date: 'long':'':(langObservable | async))
+      "
     ></app-state-selector>
     <app-issue-indicator></app-issue-indicator>
   </ng-container>
diff --git a/src/app/navbar/navbar.component.ts b/src/app/navbar/navbar.component.ts
index 65bd1dbe..91d35f34 100644
--- a/src/app/navbar/navbar.component.ts
+++ b/src/app/navbar/navbar.component.ts
@@ -14,6 +14,7 @@ import { CLOSE_SIDEBARS, EDIT_FILTER_TEXT, TOGGLE_LIST, TOGGLE_MENU } from '../a
 import { DataService } from '../data.service';
 import { IAppState } from '../store';
 import * as sharedConstants from './../../assets/shared-constants.json';
+import { LanguageService } from './../core/language.service';
 
 @Component({
   selector: 'app-navbar',
@@ -24,7 +25,6 @@ export class NavbarComponent implements OnInit {
   @select() showList;
   @select() showMenu: Observable<boolean>;
   @select() filterText;
-  @select() lang$;
   @select() mode;
   @Output() menuToggle = new EventEmitter<boolean>();
   @select() device$;
@@ -32,7 +32,13 @@ export class NavbarComponent implements OnInit {
   public cities = [];
   public last_scan: Date = new Date();
 
-  constructor(private dataService: DataService, private ngRedux: NgRedux<IAppState>) {}
+  constructor(
+    private dataService: DataService,
+    private ngRedux: NgRedux<IAppState>,
+    public languageService: LanguageService
+  ) {}
+
+  public langObservable = this.languageService.langObservable;
 
   ngOnInit(): void {
     this.dataService.fetchLocationMetadata().then(([_, cities]) => {
diff --git a/src/app/router/router.component.ts b/src/app/router/router.component.ts
index 5d482269..189d1c6d 100644
--- a/src/app/router/router.component.ts
+++ b/src/app/router/router.component.ts
@@ -54,6 +54,7 @@ export class RouterComponent implements OnInit {
       }
     });
 
+    //TODO @ralf.hauser this observable is in a concurrency race with the above, looks smelly
     this.route.queryParamMap.subscribe(paramMap => {
       // update state from url params
       this.routeValidator.updateFromRouteParams(paramMap);
diff --git a/src/app/services/route-validator.service.ts b/src/app/services/route-validator.service.ts
index 02c942f1..7814da86 100644
--- a/src/app/services/route-validator.service.ts
+++ b/src/app/services/route-validator.service.ts
@@ -9,7 +9,8 @@ import { NgRedux } from '@angular-redux/store';
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import _ from 'lodash';
-import { CHANGE_CITY, CHANGE_LANG, CHANGE_MODE, SELECT_FOUNTAIN_SUCCESS } from '../actions';
+import { CHANGE_CITY, CHANGE_MODE, SELECT_FOUNTAIN_SUCCESS } from '../actions';
+import { LanguageService } from '../core/language.service';
 import { DataService, lookupAlias } from '../data.service';
 import { FountainSelector, IAppState } from '../store';
 
@@ -29,49 +30,19 @@ export interface QueryParams {
   filterText?: string;
 }
 
+interface AllowedValue {
+  action: string;
+  default_code: string;
+  values: { code: string; aliases: string[] }[];
+}
+
 @Injectable({
   providedIn: 'root',
 })
 export class RouteValidatorService {
   // Validates route names
 
-  allowedValues = {
-    lang: {
-      action: CHANGE_LANG,
-      default_code: 'de',
-      values: [
-        {
-          name: 'English',
-          code: 'en',
-          aliases: ['english', 'anglais', 'englisch', 'en', 'e'],
-        },
-        {
-          name: 'Français',
-          code: 'fr',
-          aliases: ['french', 'französisch', 'franzoesisch', 'francais', 'fr', 'f'],
-        },
-        {
-          name: 'Deutsch',
-          code: 'de',
-          aliases: ['german', 'allemand', 'deutsch', 'de', 'd'],
-        },
-        {
-          name: 'Italiano',
-          code: 'it',
-          aliases: ['italian', 'italiano', 'italien', 'italienisch', 'it', 'i'],
-        },
-        {
-          name: 'Türkçe',
-          code: 'tr',
-          aliases: ['tr', 'turc', 'türkisch', 'turco', 't', 'turkish'],
-        },
-        {
-          name: 'Српски',
-          code: 'sr',
-          aliases: ['srpski', 'serbian', 'serbian', 'sr', 'srb'],
-        },
-      ],
-    },
+  allowedValues: { [key: string]: AllowedValue | undefined } = {
     mode: {
       action: CHANGE_MODE,
       default_code: 'map',
@@ -155,21 +126,22 @@ export class RouteValidatorService {
     //private route: ActivatedRoute,
     private http: HttpClient,
     private ngRedux: NgRedux<IAppState>,
-    private dataService: DataService
+    private dataService: DataService,
+    private languageService: LanguageService
   ) {}
 
-  validate(key: string, value: any, useDefault = true): string {
+  validate(key: string, value: any, useDefault = true): string | null {
     let code: string = null;
-    const allwValsKey = this.allowedValues[key];
-    if (null !== allwValsKey && null !== value) {
+    const allowedValsKey = this.allowedValues[key];
+    if (null !== allowedValsKey && null !== value) {
       if (useDefault) {
         //  start with default code value
-        code = allwValsKey.default_code;
+        code = allowedValsKey.default_code;
       }
 
       // see if there is a match among aliases
-      for (let i = 0; i < allwValsKey.values.length && null != value && 0 < value.trim().length; ++i) {
-        const val = allwValsKey.values[i];
+      for (let i = 0; i < allowedValsKey.values.length && 0 < value.trim().length; ++i) {
+        const val = allowedValsKey.values[i];
         // find matching
         const index = val.aliases.indexOf(value.toLowerCase());
         if (index >= 0) {
@@ -193,7 +165,7 @@ export class RouteValidatorService {
       if (code !== null && code !== this.ngRedux.getState()[key]) {
         console.log(
           "redux dispatch action '" +
-            allwValsKey.action +
+            allowedValsKey.action +
             "' code '" +
             code +
             "' for '" +
@@ -205,7 +177,7 @@ export class RouteValidatorService {
             "'" +
             new Date().toISOString()
         );
-        this.ngRedux.dispatch({ type: allwValsKey.action, payload: code });
+        this.ngRedux.dispatch({ type: allowedValsKey.action, payload: code });
       } else {
         console.log(
           "no redux dispatch for '" +
@@ -514,7 +486,7 @@ export class RouteValidatorService {
     // Get query parameter values from app state. use short query params by default for #159
     const state = this.ngRedux.getState();
     const queryParams: QueryParams = {
-      l: state.lang, // use short language by default
+      l: this.languageService.currentLang, // use short language by default
       // mode: state.mode,
     };
     // if (state.fountainSelector !== null) {
@@ -554,7 +526,14 @@ export class RouteValidatorService {
 
     // validate lang
     const lang = paramsMap.get('lang') || paramsMap.get('l');
-    this.validate('lang', lang, true);
+    if (lang !== undefined) {
+      try {
+        this.languageService.changeLang(lang);
+      } catch (e: unknown) {
+        // just ignore if the language is not supported
+      }
+    }
+    // this.validate('lang', lang, true);
 
     // create valid fountain selector from query params
     const fountainSelector: FountainSelector = {
diff --git a/src/app/shared/illegalState.ts b/src/app/shared/illegalState.ts
index 1f5f9349..89a38cc9 100644
--- a/src/app/shared/illegalState.ts
+++ b/src/app/shared/illegalState.ts
@@ -1,7 +1,7 @@
 /**
  * Since throw is not an expression in typescript you cannot do thing like ... || throw
  * Hence this function
- * @author Tegonal
+ * @author Tegonal GmbH
  * @license AGPL
  */
 export function illegalState(msg: string, ...optionalParams: any[]): never {
diff --git a/src/app/store.ts b/src/app/store.ts
index a2a767cf..06fa8264 100644
--- a/src/app/store.ts
+++ b/src/app/store.ts
@@ -16,7 +16,6 @@ import {
   CLOSE_NAVIGATION,
   TOGGLE_MENU,
   GET_DIRECTIONS_SUCCESS,
-  CHANGE_LANG,
   TOGGLE_PREVIEW,
   SELECT_PROPERTY,
   CLOSE_DETAIL,
@@ -67,7 +66,6 @@ export interface IAppState {
   fountainSelected: Feature<any>;
   propertySelected: FountainProperty;
   fountainSelector: FountainSelector;
-  lang: string;
   device: DeviceMode;
   userLocation: number[];
   dataIssues: DataIssue[];
@@ -94,7 +92,6 @@ export const INITIAL_STATE: IAppState = {
   fountainSelected: null,
   propertySelected: null,
   fountainSelector: null,
-  lang: 'de',
   device: 'mobile',
   userLocation: null,
   dataIssues: [],
@@ -168,10 +165,6 @@ export function rootReducer(state: IAppState, action: any): IAppState {
       return tassign(state, { showList: false, showMenu: false });
     }
 
-    // Added state for Language Change
-    case CHANGE_LANG:
-      return tassign(state, { lang: action.payload });
-
     // Change city
     case CHANGE_CITY:
       // when changing city, change to map mode and unselect fountain
diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
index 7f423c2a..34089ab5 100644
--- a/src/assets/i18n/de.json
+++ b/src/assets/i18n/de.json
@@ -105,7 +105,7 @@
     "curated": "kuratiert"
   },
   "gallery": {
-    "call_to_action": "Hast Du eine bessere Foto?",
+    "call_to_action": "Hast Du ein besseres Foto?",
     "watermark": "nicht kuratiert"
   },
   "groundwater": "Grundwasser",
@@ -175,13 +175,15 @@
     "wiki_commons_name": "Wikimedia Commons",
     "pano_url": "externe Panoramabilder"
   },
-  "selector": {
+  "lang": {
     "en": "English",
     "de": "Deutsch",
     "fr": "Français",
     "it": "Italiano",
     "tr": "Türkçe",
-    "sr": "Serbisch",
+    "sr": "Serbisch"
+  },
+  "selector": {
     "ch-ge": "Genf",
     "ch-bs": "Basel",
     "ch-zh": "Zürich",
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index b0f3e061..7a19ba43 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -173,13 +173,15 @@
     "wiki_commons_name": "Wikimedia Commons",
     "pano_url": "external panorama"
   },
-  "selector": {
+  "lang": {
     "en": "English",
     "de": "Deutsch",
     "fr": "Français",
     "it": "Italiano",
     "tr": "Türkçe",
-    "sr": "Serbian",
+    "sr": "Serbian"
+  },
+  "selector": {
     "ch-ge": "Geneva",
     "ch-bs": "Basel",
     "ch-zh": "Zurich",
diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json
index 3d668492..e5146d4e 100644
--- a/src/assets/i18n/fr.json
+++ b/src/assets/i18n/fr.json
@@ -174,13 +174,15 @@
     "wiki_commons_name": "Wikimedia Commons",
     "pano_url": "images panoramiques externes"
   },
-  "selector": {
+  "lang": {
     "en": "English",
     "de": "Deutsch",
     "fr": "Français",
     "it": "Italiano",
     "tr": "Türkçe",
-    "sr": "Serbian",
+    "sr": "Serbian"
+  },
+  "selector": {
     "ch-ge": "Genève",
     "ch-bs": "Bâle",
     "ch-zh": "Zurich",
diff --git a/src/assets/i18n/it.json b/src/assets/i18n/it.json
index 8a7c2c71..46b1eeef 100644
--- a/src/assets/i18n/it.json
+++ b/src/assets/i18n/it.json
@@ -173,13 +173,15 @@
     "wiki_commons_name": "Wikimedia Commons",
     "pano_url": "panorama esterno"
   },
-  "selector": {
+  "lang": {
     "en": "English",
     "de": "Deutsch",
     "fr": "Français",
     "it": "Italiano",
     "tr": "Türkçe",
-    "sr": "Serbian",
+    "sr": "Serbian"
+  },
+  "selector": {
     "ch-ge": "Ginevra",
     "ch-bs": "Basilea",
     "ch-zh": "Zurigo",
diff --git a/src/assets/i18n/sr.json b/src/assets/i18n/sr.json
index 94d58a79..05620e34 100644
--- a/src/assets/i18n/sr.json
+++ b/src/assets/i18n/sr.json
@@ -174,13 +174,15 @@
     "wiki_commons_name": "Wikimedia Commons",
     "pano_url": "external panorama"
   },
-  "selector": {
+  "lang": {
     "en": "Енглески",
     "de": "Немачки",
     "fr": "Француски",
     "it": "Италијански",
     "tr": "Турски",
-    "sr": "Српски",
+    "sr": "Српски"
+  },
+  "selector": {
     "ch-ge": "Женева",
     "ch-bs": "Базел",
     "ch-zh": "Цирих",
diff --git a/src/assets/i18n/tr.json b/src/assets/i18n/tr.json
index ddcfa62d..8613f359 100644
--- a/src/assets/i18n/tr.json
+++ b/src/assets/i18n/tr.json
@@ -170,13 +170,15 @@
     "wiki_commons_name": "wikimedia",
     "pano_url": "panorama"
   },
-  "selector": {
+  "lang": {
     "en": "English",
     "de": "Deutsch",
     "fr": "Français",
     "it": "Italiano",
     "tr": "Türkçe",
-    "sr": "Serbian",
+    "sr": "Serbian"
+  },
+  "selector": {
     "ch-ge": "Cenevre",
     "ch-bs": "Basel",
     "ch-zh": "Zürih",