Angular2 Material Responsive Sidnav and Flexible Layout

Question

Can I make my mat-sided responsive using the open property or the open () method and a flexible api responsive layout? how<mat-sidenav #sidenav mode="side" opened="true" [fxFlex.xs]="sidenav.close()">

Answer 1

You can use @ angular / flex-alyout ObservableMedia to view media / interrupt changes and updates modeor other properties, respectively, depending on the active media level. This is done by subscribing to an inclinated instance of the service ObservableMediaand checking the active media level. Then you can bind openedand mode properties to <md-sidenav>by linking []to your class properties. This logic can be placed in services and / or attribute directives, if necessary.

Using / updating properties instead of applying CSS changes ensures that appropriate animations occur.

TS:

import { Component } from '@angular/core';
import { MediaChange, ObservableMedia } from "@angular/flex-layout";

@Component({ ... })
export class AppComponent  {
  mode: string = 'side';
  opened: boolean = true;

  constructor(private media: ObservableMedia) {
    this.media.subscribe((mediaChange: MediaChange) => {
      this.mode = this.getMode(mediaChange);
      // this.opened = this.getOpened(mediaChange);
    });
  }

  private getMode(mediaChange: MediaChange): string {
    // set mode based on a breakpoint
    if (this.media.isActive('gt-sm')) {
      return 'side';
    } else {
      return 'over';
    }
  }

  // open/close as needed
  private getOpened(mediaChange: MediaChange): string { }
}

HTML:

<md-sidenav-container class="example-container">
  <md-sidenav #sidenav class="example-sidenav" [opened]="opened" [mode]="mode">
    Jolly good!
  </md-sidenav>

  <div class="example-sidenav-content">
    <p>Sidenav content</p>

    <button type="button" md-button (click)="sidenav.open()">
      Open sidenav
    </button>
  </div>

</md-sidenav-container>

Hope this helps!

Answer 2

- css flex, mat-sidenav , .

<mat-sidenav [ngClass]="sidenav.opened ? 'sideOpened' : 'sideClosed'"> 

.css

    .sideOpened {
    // Handle Responsiveness
    }
    .sideClosed {
    // Handle Responsiveness
    }