[Fixed] How to show different element based on selected language in l18n in angular

Issue

I have an angular app. I am using two languages (English and Urdu) to show texts. English uses ltr and Urdu uses rtl way to display text. Now, I want to add an *ngif in a to show some element only in English. If Urdu language I selected, I want to use the else-block of *ngif. What should I pass to *ngif as check , to get the desired result. Thanks in advance.

Solution

You can use the getDefaultLang() method to retrieve the language used.

Within your component :

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

@Component({
    selector: 'app',
    template: 'template.html'
})
export class YourComponent {

    constructor(private translate: TranslateService) {
    }

    rightToLeftText(){
       // RightToLeft text if language is equal to Urdu
       return this.translate.getDefaultLang() == "urd";
    }

}

And in your template :

<div *ngIf="rightToLeftText()">Right to left</div>
<div *ngIf="!rightToLeftText()">Not right to left</div>