I'm trying to set the page direction (RTL or LTR) dynamically on my Angular 5 project.
In index.html, if I write statically one or another in body tag or app-root selector, works fine.
<body dir="rtl">
<app-root></app-root>
</body>
However, if I try to set dynamically, e.g using a variable called textDir, nothing happens (it keeps the standard value, LTR value):
index.html
<body [dir]="textDir">
<app-root></app-root> <!-- I tried also <app-root [dir]="textDir"></app-root> with no success -->
</body>
appponent.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './appponent.html',
styleUrls: ['./appponent.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);
}
}
The console.log displays the correct direction, according to the conditional, but has no effect on index.html.
How can I do that?
I'm trying to set the page direction (RTL or LTR) dynamically on my Angular 5 project.
In index.html, if I write statically one or another in body tag or app-root selector, works fine.
<body dir="rtl">
<app-root></app-root>
</body>
However, if I try to set dynamically, e.g using a variable called textDir, nothing happens (it keeps the standard value, LTR value):
index.html
<body [dir]="textDir">
<app-root></app-root> <!-- I tried also <app-root [dir]="textDir"></app-root> with no success -->
</body>
app.ponent.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.ponent.html',
styleUrls: ['./app.ponent.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);
}
}
The console.log displays the correct direction, according to the conditional, but has no effect on index.html.
How can I do that?
-
The values in AppComponent are only available from
app.ponent.html, not fromindex.html– user184994 Commented May 7, 2018 at 13:06
3 Answers
Reset to default 6you can use document.dir in your app ponent contractor and it will set the dir to your html tag and can pass it with variable
direction : string = "rtl";
constructor() {
document.dir = this.direction;
}
There is no template binding done in the index.html. For this you have to make a root element inside your app.ponent.html like:
app.ponent.html
<div [dir]="textDir">
<!-- rest of app template -->
</div>
following Mustafa saeed's link, i wrote the following code in my translate function of mgx-translate switchLang().
import { DOCUMENT } from '@angular/mon';
import { Component, Inject, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-translater',
templateUrl: './translater.ponent.html',
styleUrls: ['./translater.ponent.scss']
})
export class TranslaterComponent implements OnInit {
constructor(public translate: TranslateService, @Inject(DOCUMENT) private document: Document) { }
ngOnInit(): void {
this.translate.addLangs(['en', 'ar']);
this.translate.setDefaultLang('en');
}
switchLang(lang: string) {
const htmlTag = this.document.getElementsByTagName("html")[0] as HTMLHtmlElement;
htmlTag.dir = lang === "ar" ? "rtl" : "ltr";
htmlTag.lang = lang;
this.translate.use(lang);
}
}
translater.ponent.html
<select #selectedLang (change)="switchLang(selectedLang.value)">
<option *ngFor="let language of translate.getLangs()" [value]="language"
[selected]="language === translate.currentLang">
{{ language | uppercase }}
</option>
</select>
as i was using ngx-foundation, which has inbuilt support for rtl-ltr directions, i did not had to use any more css..