0

I have this code

HTML file

<div>{{ 'Hello' | translate }}</div>
<button ion-button (click)="changeLang()">change Language</button>

Typescript file

import { Pipe, PipeTransform } from '@angular/core';
import { SettingsService } from '../services/settings';
import Translation from '../translation/translation';

@Pipe({name: 'translate'})
export class Translate implements PipeTransform {

  constructor(private settingsService: SettingsService) {}
  private language = this.settingsService.getLanguage();

  transform(word: string): string {
    return Translation[this.language][word];
  }
}

when I change language variable using this code, Interpolation doesn't update

changeLang(){
  this.settingsService.editlanguage('fr');
}

editlanguage() and getLanguage(); From This settings file

export class SettingsService {
  private language = 'en'; // when I change this variable, Interpolation doesn't update

  getLanguage() {
    return this.language;
  }

  editlanguage(lang: string) {
    this.language = lang;
  }

}

my Question is How to update Interpolation

Amjed Omar
  • 853
  • 2
  • 14
  • 30
  • You can take a look at [this question](https://stackoverflow.com/q/48303252/1009922). You should also get the current language from the service in `transform`. As it is now, you always use the language that you got from the service when the `Translate` pipe was initialized. – ConnorsFan Jan 31 '18 at 14:14
  • 1) the pipe is not pure 2) you will need to somehow "signalize" consumers of the SetttingsService that the language was changed (rxjs stream) 3) You will need to force dirty check whenever the language is changed (change detection) – Jota.Toledo Jan 31 '18 at 14:15

0 Answers0