TextDirection
Reactive read/write wrapper around an element's dir attribute for detecting and controlling text directionality.
Usage
import { Component } from '@angular/core';
import { textDirection } from '@signality/core';
@Component({
template: `
<p>Current direction: {{ dir() }}</p>
<button (click)="dir.set('rtl')">RTL</button>
<button (click)="dir.set('ltr')">LTR</button>
`,
})
export class TextDirectionDemo {
readonly dir = textDirection();
}Use InjectionToken for Singleton
For global state tracking like textDirection, consider using the provided TEXT_DIRECTION token instead of calling the function directly. This provides a singleton instance that can be shared across your entire application, reducing memory usage and event listener overhead:
import { inject } from '@angular/core';
import { TEXT_DIRECTION } from '@signality/core';
const dir = textDirection();
const dir = inject(TEXT_DIRECTION); Learn more about Token-based utilities.
Parameters
| Parameter | Type | Description |
|---|---|---|
options | TextDirectionOptions | Optional configuration (see Options below) |
Options
The TextDirectionOptions extends CreateSignalOptions<TextDirection> and WithInjector:
| Option | Type | Default | Description |
|---|---|---|---|
target | MaybeElementSignal<HTMLElement> | document.documentElement | Element to observe |
initialValue | TextDirection | 'ltr' | Initial direction value used before the DOM is read |
equal | (a: TextDirection, b: TextDirection) => boolean | - | Custom equality function for the signal |
injector | Injector | - | Optional injector for DI context |
Return Value
Returns a WritableSignal<TextDirection>. Possible values:
'ltr'— Left-to-right text direction'rtl'— Right-to-left text direction'auto'— Direction determined by the browser based on content
Calling .set(dir) updates both the signal and the element's dir attribute. External attribute changes are automatically tracked via MutationObserver.
Examples
RTL support toggle
import { Component, computed } from '@angular/core';
import { textDirection } from '@signality/core';
@Component({
template: `
<button (click)="toggle()">
Switch to {{ isRtl() ? 'LTR' : 'RTL' }}
</button>
`,
})
export class RtlToggle {
readonly dir = textDirection();
readonly isRtl = computed(() => this.dir() === 'rtl');
toggle() {
this.dir.set(this.isRtl() ? 'ltr' : 'rtl');
}
}Observe specific element
import { Component, viewChild, ElementRef } from '@angular/core';
import { textDirection } from '@signality/core';
@Component({
template: `
<div #content dir="auto">
<p>Direction: {{ dir() }}</p>
</div>
`,
})
export class ElementDirectionDemo {
readonly content = viewChild<ElementRef>('content');
readonly dir = textDirection({ target: this.content });
}SSR Compatibility
On the server, returns a regular WritableSignal initialized with 'ltr' (or the provided initialValue).
Type Definitions
type TextDirection = 'ltr' | 'rtl' | 'auto';
interface TextDirectionOptions extends CreateSignalOptions<TextDirection>, WithInjector {
readonly target?: MaybeElementSignal<HTMLElement>;
readonly initialValue?: TextDirection;
}
function textDirection(options?: TextDirectionOptions): WritableSignal<TextDirection>;
const TEXT_DIRECTION: InjectionToken<WritableSignal<TextDirection>>;Related
- BrowserLanguage — Reactive browser language detection