i18n multi-direction RTL angular

Question

i am using angular 4 and i am trying to implement the technique of i18n into my app, the problem is: i don't know where should i write the direction LTR/RTL in the file of the translation messages.ar.xlf , even when i mention it in every tag in my original html file using i18n-dir dir="ltr" i don't get the direction in the file messages.xlf extracted by the cmd ng xi18n, and so i can't change the direction of the page :/

New-post.component.html

<div class="row">
    <div class="col-sm-8 col-sm-offset-2">
      <h2 i18n="@@newPost" i18n-dir dir="ltr">New Post</h2>
      <form [formGroup]="postForm" (ngSubmit)="onSavePost()">
        <div class="form-group">
          <label for="title" i18n="title" i18n-dir dir="ltr">Title</label>
          <input type="text" id="title"
                 class="form-control" formControlName="title">
        </div>
        <div class="form-group">
          <label for="content" i18n="content" i18n-dir dir="ltr">Content</label>
          <textarea id="content"
                    class="form-control" formControlName="content">
          </textarea>
        </div>
        <button class="btn btn-primary" [disabled]="postForm.invalid "
            type="submit" i18n="save"  dir="ltr">Save</button>
      </form>
    </div>
  </div>

messages.xlf

<trans-unit id="newPost" datatype="html">
        <source>New Post</source>
        <context-group purpose="location">
          <context context-type="sourcefile">app\posts\new-post\new-post.component.ts</context>
          <context context-type="linenumber">3</context>
        </context-group>
      </trans-unit>
      <trans-unit id="fdf7cbdc140d0aab0f0b6c06065a0fd448ed6a2e" datatype="html">
        <source>Title</source>
        <context-group purpose="location">
          <context context-type="sourcefile">app\posts\new-post\new-post.component.ts</context>
          <context context-type="linenumber">6</context>
        </context-group>
        <note priority="1" from="description">title</note>
      </trans-unit>
      <trans-unit id="4ab4cb601522b9194922554d934c4c30bd93567d" datatype="html">
        <source>Content</source>
        <context-group purpose="location">
          <context context-type="sourcefile">app\posts\new-post\new-post.component.ts</context>
          <context context-type="linenumber">11</context>
        </context-group>
        <note priority="1" from="description">content</note>
      </trans-unit>
      <trans-unit id="52c9a103b812f258bcddc3d90a6e3f46871d25fe" datatype="html">
        <source>Save</source>
        <context-group purpose="location">
          <context context-type="sourcefile">app\posts\new-post\new-post.component.ts</context>
          <context context-type="linenumber">17</context>
        </context-group>
        <note priority="1" from="description">save</note>
      </trans-unit>

see the answer here: https://stackoverflow.com/a/46984043/1401751 — Ofer Herman, Feb 24 '19 at 14:00
@OferHerman the answer is not working. please post the answer related to the question asked. I am also looking for an answer. — Jomal Johny, Jun 15 '19 at 11:19
@JomalJohny there is no way at the moment to specify direction as part of angular i18n so both the accepted answer for this question and the one I linked show the way to handle RTL. — Ofer Herman, Jun 16 '19 at 12:48

Mohamed Hassona · Accepted Answer · 2019-12-11T17:09:07.713

ooops: i finally found the answer, it's very easy ;) There is an html attribute in the app.component.html dir that can take the values "rtl" or "ltr" and aligns its content accordingly.

app.component.html

<app-header></app-header>
<div class="container" dir="{{textDir}}">
    <router-outlet></router-outlet>
</div>

And by listening to the onLangChange event from the TranslateService in the app.component.ts and inside that we check if the default Lang is Arabic and then set an attribute to "rtl":

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  textDir: string = 'ltr';

  constructor(private translate: TranslateService) {

//this is to determine the text direction depending on the selected language

    this.translate.onLangChange.subscribe((event: LangChangeEvent) =>
    {
      if(event.lang == 'ar')
      {
        this.textDir = 'rtl';
      } 
      else
      {
        this.textDir = 'ltr';
      }
    });
  }

  

}

and this just worked find for me;

i found the answer by Dayana Jabif on this issue

i18n multi-direction RTL angular

1 Answers1