Angular2 material sidenav - dynamic change of direction rtl / ltr

Question

I am trying to change my layout dynamically according to the user's language choice and switch from LTR to RTL on the fly.

I am using Angular 2 rc6, material 2.0.0-alpha.9-3

It looks like when the page is loaded, it works fine with rtl or ltr. However, when it dynamically changed from the application (see Plunker), the direction changes, but the generated md-sidenav-content element has calculated margins to the right and left of the field.

Digging further, I was able to see that the _dir object has an eventEmitter, which should monitor _dir change events and recount the fields

@ angular / material / sidenav / sidenav.js:

_dir.dirChange.subscribe(function () { return _this._validateDrawers(); });

But it was never called during a dynamic change of direction. Although, _dir has the correct meaning when a page loads for the first time, be it ltr or rtl.

Finally, here is the behavior plunker:

http://plnkr.co/edit/o8lXWC?p=preview

I suspect that I am not using _dir correctly, but I have not been able to figure out how to do it correctly.

Answer 1

Take a look at the source code Dirdirective

@Input('dir') _dir: LayoutDirection = 'ltr';

• https://github.com/angular/material2/blob/2.0.0-alpha.9/src/lib/core/rtl/dir.ts#L19-L43

As you can see, you are changing the property _dirinstead of Dirsetter:

set dir(v: LayoutDirection) {
  let old = this._dir;
  this._dir = v;
  if (old != this._dir) {
    this.dirChange.emit(null);
  }
}

So, I think your solution should look like this:

view

<md-sidenav-layout fullscreen dir="ltr" #root="$implicit">

<select #langSelect (change)="changeLang(langSelect.value, root)">

component

changeLang(lang, root: Dir) {
  this.translate.use(lang);
  root.dir = lang == "fr" ? "rtl" : "ltr";
}

, direction: string .

:

translate: TranslateService; //it redundant `private translate: TranslateService` does it
direction: string; // omit it

constructor(private translate: TranslateService) {
  this.direction = "ltr"; // omit it
  translate.addLangs(["en", "fr"]);
  translate.setDefaultLang('en');

  let browserLang = translate.getBrowserLang();
  translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
  this.translate = translate; // it redundant
}

, ,

• https://github.com/angular/material2/blob/2.0.0-alpha.9/src/demo-app/demo-app/demo-app.html#L42-L48

, !

Answer 2

"end" "start" align, , , . , , "" NgStyle , Plnkr

[ngStyle]="{'margin-right': move}"

, .

Answer 3

, , 1, angular 2. CSS:

md-sidenav {
    left: initial;
    right: 0;
}
md-sidenav.md-closed {
    transform: translate3d(100%, 0, 0);
}

Now it can be used only for those who have an rtl-direction, adding the class / attribute to the body, and then only selecting this would be enough.