A bidirectional support library for angular

Usage no npm install needed!

<script type="module">
  import eSquareBdir from 'https://cdn.skypack.dev/@e-square/bdir';



MIT commitizen PRs styled with prettier All Contributors

A bidirectional support lib for angular


  • ✅ Runtime compatible
  • ✅ CDK compatible
  • ✅ Language to Direction support

Table of Contents



npm install @e-square/bdir


yarn add @e-square/bdir


  1. Import the BDirModule:

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { BDirModule } from '@e-square/bdir';
        imports: [
        bootstrap: [AppComponent]
    export class AppModule { }
  2. Add bdir directive In the application wrapper:

    <div id="app-wrapper" bdir> 
          Welcome to {{ title }}!
  3. Start using scss mixins:

    @import "~@e-square/bdir/styles/mixins";
    h1 {
      color: darkslategray;
      @include padding-start(20px);

    Now the h1 element will transpile to:

    h1 {
      color: darkslategray;
    *[dir=ltr] h1 {
      padding-right: 20px; }
    *[dir=rtl] h1 {
      padding-left: 20px; }


The service and directive implements Angular CDK's Directionality class and uses its API.



*setLang(lang: Lang) - Setting the current language which will determine the direction value

*setDir(dir: Direction) - Set the current direction value.

*getDir$(): Observable<Direction> - Get the current direction value as observable.

*setLang(lang: Lang) - Get the opposite direction value as observable.


bdir: 'start' | 'end' - Will set a dir attribute to the hosting element with rtl | ltr value accordingly start, is the default value.

  <element bdir="start"></element>
  <!-- Can also be written as -->
  <element bdir></element>


RTL_LANGUAGES - Define which language will consider as rtl languages, default value: ['he', 'ar', 'hy', 'dv', 'ff', 'ku', 'fa'].

DEFAULT_LANG - Define the default language, default value: 'en'


All mixins were written following to the css syntax, simply change left & right with start & end.

Also the mixins were developed in a way that the transpiled code will be as minimal as possible.

*$encapsulation property used for inner components to be affected by their host's direction by using angular's :host-context

padding-start($value, $encapsulation: true)

padding-end($value, $encapsulation: true)

margin-start($value, $encapsulation: true)

margin-end($value, $encapsulation: true)

border-start($value, $encapsulation: true)

border-end($value, $encapsulation: true)

float($start: true, $encapsulation: true)

dir($start: true, $encapsulation: true)

start($value, $encapsulation: true)

end($value, $encapsulation: true)

transformTranslate($x, $y: 0, $encapsulation: true)

transformScale($x, $y: 1, $encapsulation: true)

mirror($encapsulation: true)


Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

Icons made by Freepik from www.flaticon.com