|
3 | 3 | ### Setting a text-direction for your application |
4 | 4 | The [`dir` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) |
5 | 5 | is typically applied to `<html>` or `<body>` element of a page. However, it can be used on any |
6 | | -element to apply a text-direction to a smaller subset of the page. |
| 6 | +element, within your Angular app, to apply a text-direction to a smaller subset of the page. |
7 | 7 |
|
8 | 8 | All Angular Material components automatically reflect the LTR/RTL direction |
9 | | -of their container. |
| 9 | +of their container. |
10 | 10 |
|
11 | 11 | ### Reading the text-direction in your own components |
12 | 12 | `@angular/cdk/bidi` provides a `Directionality` injectable that can be used by any component |
13 | | -in your application. To consume this injectable, you must import `BidiModule` |
14 | | -from `@angular/cdk/bidi`. |
| 13 | +in your application. To consume it, you must import `BidiModule` from `@angular/cdk/bidi`. |
15 | 14 |
|
16 | 15 | `Directionality` provides two useful properties: |
17 | 16 | * `value`: the current text direction, either `'ltr'` or `'rtl'`. |
18 | 17 | * `change`: an `Observable` that emits whenever the text-direction changes. Note that this only |
19 | 18 | captures changes from `dir` attributes _inside the Angular application context_. It will not |
20 | | -emit for changes to `dir` on `<html>` and `<body>`, as these are assumed to be static. |
| 19 | +emit for changes to `dir` on `<html>` and `<body>`, as they are assumed to be static. |
21 | 20 |
|
22 | 21 | #### Example |
23 | 22 | ```ts |
24 | | -@Component({ /* ... */}) |
| 23 | +@Component({ /* ... */ }) |
25 | 24 | export class MyCustomComponent { |
26 | 25 | private dir: Direction; |
27 | 26 |
|
28 | 27 | constructor(directionality: Directionality) { |
29 | 28 | this.dir = directionality.value; |
| 29 | + |
30 | 30 | directionality.change.subscribe(() => { |
31 | 31 | this.dir = directionality.value; |
32 | 32 | }); |
|
0 commit comments