RTL In THIS index.html file with {{variable}}

Ionic Framework ionic-v3
1

The thing is i change languages and have RTL and LTR in my global SCSS. In my index.html i have the direction for different languages.

In my case i have RTL and LTR … Arabic and English.

When i start my application onInit it check what language i have and change RTL or LTR based language. But it wont take my service variable in index.html. Any ide?

EXAMPEL

 :root[dir="rtl"] {
     .my-header {
         font-size: 20px;
       }
 }

In my root HTML i would like to change dir=“rtl” with a variable from my service variable does not take it. on load.
If i hard code the RTL it works with my SCSS IF statement but not with a service variable…any ide how i can make it happend?

<!DOCTYPE html>
<html lang="en" dir="rtl">

<head>
  <meta charset="utf-8" />
  <title>Böntider Sverige</title>

  <base href="/" />

  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="msapplication-tap-highlight" content="no" />

  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />

  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>

<body>
  <app-root></app-root>
</body>

</html>

Would like to replace this tag here. to this below… but it does not read my service variable…

<html lang="en" dir="{{this.service.langDirection_gv}}">

But it does not read the value.

How do i read this value before …

Do i need to import my service in main.ts?