docs(bidirectionality): bidirectionality how-to explanation #5474
Conversation
|
@EladBezalel Can you please elaborate or prepare a plnkr on how to change the direction of the document from the code, since when I import |
guides/bidirectionality.md
Outdated
| # Angular Material bi-directionality | ||
|
|
||
| ### How to set your application direction | ||
| The simplest way is applying `dir` attribute on either the `html` or `body` tags. |
There was a problem hiding this comment.
I would put this as more...
### 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 `<html>` or `<body>` 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 `<html>` and `<body>`, 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;
});
}
}
```
There was a problem hiding this comment.
It will not emit for changes to
diron<html>and<body>, as these are assumed to be static.
I'm not sure that this is a correct assumption to make, since overlayed items(div.cdk-overlay-container) are generated outside the Angular application context, so we don't have a single point to change the layout of the application. Or may be I have something missed?
There was a problem hiding this comment.
This describes the behavior right now. It could potentially change in a subsequent iteration.
There was a problem hiding this comment.
@jelbourn So, perhaps it could be a bright idea to specify that this is something to be revised. Should I open a feature request for this?
EladBezalel
force-pushed
the
docs/bidirectionality
branch
from
106d68e to
1cf4a7e
Compare
googlebot
added
the
cla: yes
EladBezalel
force-pushed
the
docs/bidirectionality
branch
from
1cf4a7e to
33a1e01
Compare
jelbourn
added
pr: lgtm
action: merge
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
5 participants
fixes #4387