Pipe not working with ngIf


#1

I have an app that is using globalization plugin to get user preferred language and show the translation for menu.
It is working ok if I do not use *ngIf, otherwise it will not get the correct word for it.

My translation provider

getLanguage(){
        return new Promise<boolean>((resolve, reject) => {

            this.platform.ready().then(() => {
                this.globalization.getPreferredLanguage().then(data => {
                    //If not found get the default language
                    let language = 'pt';
                    //Otherwise get the language json file
                    if(data.value) {
                        for(let item of this._languages){
                            language = item;
                            console.log(language);
                            break;
                        }
                    }

                    this.http.get<any>('language/'+language.toLowerCase()+'.json')
                    .subscribe(res => {
                        let body = res;
                        this.onChange.emit(body);
                        resolve(true);
                    });
                })
            })
        })
    }

My pipe

@Pipe({
    name: 'idioma',
    pure: false
})

export class TranslatePipe implements PipeTransform {
    
    public text: string = 'Text not found';

    constructor(private translate: TranslateProvider){}

    transform(key: string) : string{
        this.translate.onChange.subscribe(texts => {
            if(texts[key])
            this.text = texts[key];
        });

        return this.text;
    }

}

When I use a *ngIf I only got “Text not found”… Don’t know why it is happening.
Example: <h2 *ngIf=“condition”>{{ ‘TRANSLATION’ | idioma }}


#2

I would recommend using ngx-translate instead of trying to reinvent it.


#3

Hi, thanks for the tip.
I didn’t know ngx-translate… far easier.