title: Defining page direction dynamically - Angular 5
body: <p>I'm trying to set the page direction (RTL or LTR) dynamically on my Angular 5 project.</p>
  
  <p>In <strong>index.html</strong>, if I write statically one or another in body tag or app-root selector, works fine.</p>
  
  <pre><code>&lt;body dir="rtl"&gt;
    &lt;app-root&gt;&lt;/app-root&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>However, if I try to set dynamically, e.g using a variable called textDir, nothing happens (it keeps the standard value, LTR value):</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;body [dir]="textDir"&gt;
    &lt;app-root&gt;&lt;/app-root&gt; &lt;!-- I tried also &lt;app-root [dir]="textDir"&gt;&lt;/app-root&gt; with no success --&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>app.component.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'app';
  
    public textDir;    
    lang = sessionStorage.getItem("lang");    
  
    constructor() { 
  
      if(this.lang === "he"){
        this.textDir = 'rtl';
      }
      else {
        this.textDir = 'ltr';
      }
      console.log(this.textDir); 
    }
  
  }
  </code></pre>
  
  <p>The <code>console.log</code> displays the correct direction, according to the conditional, but has no effect on <code>index.html</code>.
  How can I do that?</p>