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

Created on 23 Mar 2017 · 7Comments · Source: angular/components

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?

Source

michaeljota

Most helpful comment

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) {
  }
}

chrisvfabio on 23 Mar 2017

👍3

All 7 comments

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) {
  }
}

chrisvfabio on 23 Mar 2017

👍3

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.

michaeljota on 23 Mar 2017

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