[sidenav] Flex-Layout Responsive API does not work with sidenav properties

[michaeljota]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Flex-Layout responsive API should affect sidenav properties

What is the current behavior?

It's not working

What are the steps to reproduce?

http://plnkr.co/edit/36gEcqW09IuZwLdEj59x?p=preview

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, browsers are affected?

    "@angular/common": "^2.4.6",
    "@angular/compiler": "^2.4.6",
    "@angular/core": "^2.4.6",
    "@angular/flex-layout": "^2.0.0-rc.1",
    "@angular/forms": "^2.4.6",
    "@angular/http": "^2.4.6",
    "@angular/material": "^2.0.0-beta.2",
    "@angular/platform-browser": "^2.4.6",
    "@angular/platform-browser-dynamic": "^2.4.6",
    "@angular/platform-server": "^2.4.6",
    "@angular/router": "^3.4.6",

Is there anything else we should know?

[chrisvfabio]

I don't think the sidenav component will support this.

The Flex Layout API exposes an observable for the viewport change, so you can subscribe to that and update your layout. This method works for me:

Inject ObservableMedia from @angular/flex-layout and set to public (accessible via the template)
constructor(public media: ObservableMedia) { }

Update the opened property
[opened]="media.isActive('xs')"

Example:

@Component({
  selector: 'material-app',
  template: `
    <md-toolbar color="primary">
      <button md-button (click)="sidenav.toggle()">Toggle</button>
      Title
    </md-toolbar>

    <md-sidenav-container>
      <md-sidenav
        #sidenav
        mode="over"
        [opened]="media.isActive('xs')">
      </md-sidenav>
      <div class="content">
        {{media.isActive('xs')}}
      </div>
    </md-sidenav-container>
  `,
  styles: [`
    html, body, md-sidenav-container, .content {
      width: 100%;
      height: 100%;
    }
  
    md-sidenav {
      width: 200px;
    }
  `],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  
  constructor(public media: ObservableMedia) {
  }
}

[michaeljota]

Flex-layout API are expected to interact with HTML elements, even custom elements as sidenav is. So I think sidenav should support this for sure.

Thanks for the workaround.

[jelbourn]

@michaeljota The responsive properties in flex-layout are specific to those directives and aren't general modifiers that can be added anywhere.

[michaeljota]

Sorry. I misinterpreted the docs about the responsive API. You both are right, I'm sorry.

[mhosman]

FlexLayout docs... such a pain!

[michaeljota]

@mhosman Y lo sabes...

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}