Handling RTL on angular4 application

Question

I am new to angular4, is there a way to integrate the rtlcss together with ngx-translate or directly on angular4 typescript?

RTLCSS: http://rtlcss.com/learn/

ngx-translate: https://www.npmjs.com/package/@ngx-translate/core

I already integrated the ngx-translate but I have an issue with RTL then I came to rtlcss.com which seems to be good to have but I don't how to implement it there as they don't provide it on docs.

Any suggestions or sample will be appreciated. Thank you.

score 9 · Accepted Answer · answered Sep 28 '17 at 15:36

RTLCss is a tool intended to be used as a global package not as a dependency, you give it a LTR based stylesheet, and you get the corresponding RTL css. It has also a CLI which simplify the process: RTLSCss CLI Guide.

As for handling the RTL direction with ngx-translate, I had a "dir" property in each language .json file that had a value of "ltr" or "rlt", see this plunker: https://plnkr.co/edit/oPXmAS?p=preview

With that"dir" property, you can either set a global container div that has an attribute dir with that "dir" value, and also add a special class to it if that value is "rtl" (refer to the previous plunker). And you can set any special css properties that you have for the "rtl" languages (font-family, size ...).

@Component({
  selector: 'my-app',
  template: `
  <div dir="{{ 'dir' | translate }}" [class.rtl]="('dir' | translate) === 'rtl'">
    <h2>{{ 'HOME.TITLE' | translate }}</h2>
    <label>
      {{ 'HOME.SELECT' | translate }}
      <select #langSelect (change)="translate.use(langSelect.value)">
        <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option>
      </select>
    </label>
  </div>
  `,
  styles: ['.rtl { color: red; }']
})

If you don't want to use a global div and want to set this in the body tag you'll have to inject a rendrer in the app.component like stated in this answer: Angular2 add class to body tag

Thanks @B.Yassine. I will use your idea on your sample in plunkr. It seems that its a decent solution for me. Thanks again. — jamcoder, Oct 01 '17 at 04:55

score 0 · Answer 2 · answered Dec 13 '18 at 14:41

I would use Angular CDK BidiModule https://material.angular.io/cdk/bidi/api to detect direction

The bidi package provides a common system for components to get and respond to change in the application's LTR/RTL layout direction

It should work for you, but it has nothing to do with ngx-translate

Handling RTL on angular4 application

2 Answers2