From 33a1e0110bb763a7579214e162265fb72fbcf182 Mon Sep 17 00:00:00 2001 From: Elad Bezalel Date: Wed, 12 Jul 2017 00:00:10 +0300 Subject: [PATCH] docs(bidirectionality): bidirectionality how-to explanation --- guides/bidirectionality.md | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 guides/bidirectionality.md diff --git a/guides/bidirectionality.md b/guides/bidirectionality.md new file mode 100644 index 000000000000..9b21647e416e --- /dev/null +++ b/guides/bidirectionality.md @@ -0,0 +1,35 @@ +# Angular Material bi-directionality + +### Setting a text-direction for your application +The [`dir` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) +is typically applied to `` or `` element of a page. However, it can be used on any +element to apply a text-direction to a smaller subset of the page. + +All Angular Material components automatically reflect the LTR/RTL direction +of their container. + +### Reading the text-direction in your own components +`@angular/cdk` provides a `Directionality` injectable that can be used by any component +in your application. To consume this injectable, you must import `BidiModule` +from `@angular/cdk`. + +`Directionality` provides two useful properties: +* `value`: the current text direction, either `'ltr'` or `'rtl'`. +* `change`: an `Observable` that emits whenever the text-direction changes. Note that this only +captures changes from `dir` attributes _inside the Angular application context_. It will not +emit for changes to `dir` on `` and ``, as these are assumed to be static. + +#### Example +```ts +@Component({ /* ... */}) +export class MyCustomComponent { + private dir: Direction; + + constructor(directionality: Directionality) { + this.dir = directionality.value; + directionality.change.subscribe(() => { + this.dir = directionality.value; + }); + } +} +``` \ No newline at end of file