Menu
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.
563
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
