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>

Answer 1

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