Bidirectionality

Overview for bidi

The bidi package provides a common system for components to get and respond to change in the application's LTR/RTL layout direction.

When including the CDK's BidiModule, components can inject Directionality to get the current text direction (RTL or LTR);

@Component({ ... }) 
export class MyWidget implements OnDestroy {

  /** Whether the widget is in RTL mode or not. */
  private isRtl: boolean;

  /** Subscription to the Directionality change EventEmitter. */
  private _dirChangeSubscription = Subscription.EMPTY;  

  constructor(dir: Directionality) {
    this.isRtl = dir.value === 'rtl';

    this._dirChangeSubscription = dir.change.subscribe(() => {
      this.flipDirection();
    });
  }

  ngOnDestroy() {
    this._dirChangeSubscription.unsubscribe();
  }
}  

The BidiModule also includes a directive that matches any elements with a dir attribute. This directive has the same API as Directionality and provides itself as Directionality. By doing this, any component that injects Directionality will get the closest ancestor layout direction context.