When building multilingual Angular apps, Right-to-Left (RTL) support becomes essential—especially for languages like Arabic, Hebrew, or Farsi. But managing RTL styles inside component-level SCSS can get messy if not done cleanly.Here’s a clean and reusable way to flip styles based on the text direction using a simple Sass mixin and Angular’s powerful :host-context() selector.
The Sass Mixin: Write Once, Use Anywhere
We’ll define a mixin that applies styles when the app is in RTL mode:
// rtl.mixin.scss
@mixin rtl {
:host-context([dir="rtl"]) &,
[dir="rtl"] & {
@content;
}
}
This mixin checks whether any parent element (like <html> or <body>) has the dir="rtl" attribute and conditionally applies your styles.
Usage Example:
// component.scss
@import 'path-to/rtl.mixin'; // Import the mixin
.sample-icon {
position: absolute;
left: 9px;
@include rtl {
left: auto;
right: 9;
}
}
