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.

Answer 1

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