Question: We have an Angular application which has two languages. The default is German and the other one is English. We are using `ngx-translate` as the `translateService`.

**When you refresh the browser, the application switches back to the default language.**

The `switchLang()` function gets called in our navigation bar:

```
<li class="nav-item">
    <a class="nav-link" id="switchLang" (click)="switchLang()">
      <span>
        <i class="fa fa-globe" aria-hidden="true"></i>
        <span>{{'switch-lang' | translate}}</span>
      </span>
    </a>
</li>

```

**the component.ts:**

```
switchLang() {
    this.languageService.switchLanguage();
}

```

And the **language service**:

```
import { Injectable } from '@angular/core';
import {TranslateService} from '@ngx-translate/core';

@Injectable({ providedIn: 'root' })
export class LanguageService {

  private language = 'de';

  constructor(private translateService: TranslateService) { }

  getCurrentLanguage() {
    return this.language;
  }

  getLocale() {
    if (this.language === 'en') {
      return 'en_US';
    } else {
      return 'de_DE';
    }
  }

  switchLanguage() {
    if (this.language === 'en') {
      this.language = 'de';
    } else {
      this.language = 'en';
    }
    this.translateService.use(this.language);
  }
}

```

The `translateService` is the **ngx-translate**.

Answer: 
This is the right behavior. You can use localStorage (or other place) to store the selected language.
Angular service lives entirely in memory. If you want to add a persistence you should save current value to the localStorage on a language change or save this setting to the server