diff --git a/guides/bidirectionality.md b/guides/bidirectionality.md index 1b7bca1a2d76..faa1db1701c7 100644 --- a/guides/bidirectionality.md +++ b/guides/bidirectionality.md @@ -3,30 +3,30 @@ ### 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. +element, within your Angular app, 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. +of their container. ### Reading the text-direction in your own components `@angular/cdk/bidi` 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/bidi`. +in your application. To consume it, you must import `BidiModule` from `@angular/cdk/bidi`. `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. +emit for changes to `dir` on `` and ``, as they are assumed to be static. #### Example ```ts -@Component({ /* ... */}) +@Component({ /* ... */ }) export class MyCustomComponent { private dir: Direction; constructor(directionality: Directionality) { this.dir = directionality.value; + directionality.change.subscribe(() => { this.dir = directionality.value; });