Using @mixin to achieve RTL support on Angular

Question

Using @mixin to achieve RTL support on Angular

656 Views Asked by Ran At 04 April 2025 at 12:08

I am using a mixin to convert my Angular app from LTR to RTL accordingly.

@mixin rtl($property, $ltr-value, $rtl-value) {
  [dir='ltr'] & {
    #{$property}: $ltr-value;
  }

  [dir='rtl'] & {
    #{$property}: $rtl-value;
  }
}

@mixin rtl-prop($ltr-property, $rtl-property, $value) {
  [dir='ltr'] & {
    #{$ltr-property}: $value;
  }

  [dir='rtl'] & {
    #{$rtl-property}: $value;
  }
}

When I use @include, for some reason it doesn't work. (html tag is defined properly)

@include rtl(border-radius, 0 10px 80px 0, 0 80px 10px 0);

<html lang="he" dir="rtl">

Any ideas why?

Original Q&A

There are 2 best solutions below

Marijke On 15 December 2022 at 14:01

There are a couple of things you can do to solve this, but that are not optimal:

First and for all you are checking if the component itself has dir set, that is why it isn't working. Because the direction is set on the tag. You can try to use :host-context, because than it will take a look at the html attribute and not your component. Like this:

@mixin rtl($property, $ltr-value, $rtl-value) {
  :host-context([dir='ltr']) & {
    #{$property}: $ltr-value;
  }

  :host-context([dir='rtl']) & {
    #{$property}: $rtl-value;
  }
}

But always check on canIUse to see if it has enough coverage. For this moment it is around 75% so I would say it is too low, certainly if you have a lot of mobile iOS users.

Another alternative to :host-context() is :dir(), but this has on the moment of writing only 3% coverage, so I would not bother using that either.

The currently approved answer (the one that suggests to set encapsulation to None) is not recommended since it will make all the mark-up for that component global and could cause some unexpected issues. Certainly because direction is maybe something you'd want to use in almost all of your components.

I think the best solution right now is to use logical properties from css. You use 'start' instead of 'left' for example. You can google it and find a lot of info to use it. (for example on developer mozilla site). For your example you would have to use:

.yourClass {
    border-start-start-radius: 0;
    border-start-end-radius: 10px;
    border-end-start-radius: 80px;
    border-end-end-radius: 0;
}

And this would make it look the way you want it on any text-direction without the use of any mixins.

**Ran** · Accepted Answer

Ran On 02 August 2020 at 07:11 BEST ANSWER

For those who will encounter this issue at the future, the problem was component's encapsulation - it was set to Emulated which probably interfered with the classes names.

Set it to None instead.

Using @mixin to achieve RTL support on Angular

There are 2 best solutions below

Related Questions in CSS

Related Questions in ANGULAR

Related Questions in SASS

Related Questions in RIGHT-TO-LEFT

Related Questions in LEFT-TO-RIGHT

Trending Questions

Popular # Hahtags

Popular Questions