LTR and RTL in IONIC 4

user_6759850 0
Viewed 2148

I am using ngx-translate in ionic 4 to add different languages. In my project I have arabic language. ngx-translate functionality is working fine. It is changing dir for html tag dynamically.

Problem: I want to write some styles if html tag has dir="rtl" in each component. But angular has default encapsulation, So I am unable to write the styles as follows in my component.scss file.

html[dir="rtl"]{
  h3{
     color: red;
  }
}

I know that angular provides encapsulation change properties like,

encapsulation: ViewEncapsulation.None

But I don't want to use the advantage of encapsulation.

Thanks for the help.

angular
2 Answers

Sometimes it's useful to apply styles based on some condition outside of a component's view. For example, a CSS theme class could be applied to the document <body> element, and you want to change how your component looks based on that.

:host-context Full Documentation

Use the :host-context() pseudo-class selector, which works just like the function form of :host(). The :host-context() selector looks for a CSS class in any ancestor of the component host element, up to the document root. The :host-context() selector is useful when combined with another selector.

:host-context(html[dir="rtl"]) ion-card-subtitle {
  background-color: #eef;
}
user_15123590

I have tested this but it works correctly, have you noticed that the value is being added correctly to the dir attribute of thehtml tag?

I did the following test in my component.scss or inglobal.scss and it worked perfectly, maybe you are trying to write the styles of your componentA to yourcomponentB and that is bringing you problems.

html[dir="rtl"]{
    ion-card-subtitle{
        color: red;
    }
}
user_40400990
Related