bug(sidenav): Support changing direction (RTL/LTR) in Drawer, without force reload page.

[akram1905]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Apply to: a drawer with mode="side"
Changing page direction between LTR/RTL dynamically, would cause mat-drawer-content to render incorrectly (wrong margin).
I believe replacing margin-right / margin-left with margin-inline-end / margin-inline-start in the following lines would fix the issue.

components/src/material/sidenav/drawer.ts

Line 88 in 046e1a2

'[style.margin-left.px]': '_container._contentMargins.left',

Reproduction

Example with settimeout

1. change direction to rtl dynamically ,or using dev tools. (in the example, i used setTimeout)
2. open drawer => you'll see margin is applied to wrong side

Expected Behavior

• drawer should open from left/right according to document direction
• content should have correct margin depends on start/end or RTL/LTR

Actual Behavior

margin is applied to wrong side for drawer-content

Environment

N/A

[akram1905]

Found a solution / wrokaround, I had to update Directionality value and emit change whenever i change the page's direction.
I don't know if this was intended or should be done like this.

    this.directionality.valueSignal.set(dir);
    this.directionality.change.emit(dir);