Angular2-translate and angular-moment not reactive

help
1

Hi Guyz,

I have a problem with implementing them together. Let me explain my problem. Please, help me if you have any idea.

I have a HTML as follows,

        <div class="promotions-list-item-created-at break-word" *ngIf="venue">
            {{ promotion.createdAt | amLocale : currentLanguage | amTimeAgo | capitalize }}
        </div>

What I want is to display when the related post is publised. I have following component level code.

export class PromotionsListItemComponent implements OnInit, OnDestroy {

currentLanguageSubscription: Subscription;
currentLanguage: string;

ngOnInit(): void {
    // subscribe current language
    this.subscribeCurrentLanguage();
}

subscribeCurrentLanguage(): void {
    // destroy if it is active
    if (this.currentLanguageSubscription) {
        // destroy it
        this.currentLanguageSubscription.unsubscribe();
    }

    this.languageService.getCurrentLanguage().subscribe((v) => {
        MeteorObservable.autorun().zone().subscribe(() => {
            this.currentLanguage = v;
        });
    });
}

}

At service I have the following code

@Injectable()
export class LanguageService {

private selectedLanguage: BehaviorSubject<string> = new BehaviorSubject<string>('');

constructor(public translateService: TranslateService,
            public localStorageService: LocalStorageService) {}

getCurrentLanguage(): BehaviorSubject<string> {
    // get observable of language selection
    return this.selectedLanguage;
}

changeLanguage(code: string): void {
    // to change the language code must be sent
    if (! _.isEmpty(code)) {
        // lets declare our selection handler variable
        let selectedLanguageCode;
        // its ok. lets check it now
        switch (code) {
            // if code is tr
            case 'tr' :
                // this is tr
                selectedLanguageCode = 'tr';
                // break it !
                break;
            // if code is tr
            case 'en-gb' :
                // this is tr
                selectedLanguageCode = 'en-gb';
                // break it !
                break;
            // if it is not tr. set as english
            default:
                // this is en-gb
                selectedLanguageCode = 'en-gb';
        }
        // lets change language
        this.translateService.use(selectedLanguageCode);
        // also set observable
        this.selectedLanguage.next(selectedLanguageCode);
    }
}

}

The text displayed on browser is not reactively updated when I change the current language. If I refresh the page it works as expected. Do you know what I should do to change the text without refreshihg page ?

Please help. :slight_smile:

Thanks in advance.