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


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.


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';

    selector: 'app',
    template: 'template.html'
export class YourComponent {

    constructor(private translate: TranslateService) {

       // 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> 

Leave a Reply

(*) Required, Your email will not be published