How to Handle RTL Styling in Angular Component SCSS (The Elegant Way)

STYLE SWITCHER

How to Handle RTL Styling in Angular Component SCSS (The Elegant Way)

Anish

Apr 21^st, 2025

Angular JS , Sass

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;
}
}