Resize Bar for Sidenav in Angular Material Design

resize bar for sidenav in angular material design.

Found a snippet that can help add resize where ever required and this works well with the Angular Material Design.

Angularjs version used 1.3.15 and Angular material design version Used is 0.9.8..

Tested in IE10+ and chrome.

Here is the Git hub link

https://github.com/Reklino/angular-resizable

And here is the working codepen example

http://codepen.io/Reklino/pen/raRaXq

PS-I had issues with the r-flex so I set it to false.It worked fine. 

Resize sidenav-content when toggle sidenav with Material Angular and Leaflet

Referring to the leaflet.js documentation, you can call map.invalidateSize() to trigger a re-layout.

You should call this method whenever you open / close the sidenav component.

material angular sidenav trigger resize

The trick is to set autosize to true when you know you are going to change the size of the sidenav and turn it off once the resizing is complete.

autosize: boolean = false;
doSomethingToChangeSidenavWidth() {  // do something...  // ...then  this.autosize = true;  setTimeout(() => this.autosize = false, 1);}

<mat-sidenav-container class="example-container" [(autosize)]="autosize">

How to convert toolbar to side nav bar on window resize (reduce)?

You can use a boolean flag with ngIf to show and hide sidenav button and toolbar content. Then use window:resize event to toggle the flag.

Here's an example for sidenav at screen size < 720px, and other way for >= 720px.

HTML:

<md-toolbar [color]="toolbarColor">
    <button *ngIf="openSidenavFlag" md-button color="primary" (click)="sidenav.toggle()">
      <md-icon>menu</md-icon>
    </button>
    <h1>Angular</h1>
    <div *ngIf="!openSidenavFlag" style="margin: 0 auto">
      <button md-button>Blog</button>
      <button md-button>About</button>
      <button md-button>Contact</button>
    </div>
</md-toolbar>

<div fxFlex class="app-content">
  This is the content
</div>

<md-sidenav-container (window:resize)="onResize($event)" style="height: 91vh;background: #FFFFFF">

  <md-sidenav #sidenav mode="side" style="background: orange">
    Sidenav!
  </md-sidenav>

</md-sidenav-container>

<footer style="background: skyblue">This is footer</footer>

ts:

  openSidenavFlag = false;

  constructor() {
  }

  ngOnInit(){
    this.onResize();
  }

  onResize(event) {
    let width;

    if(event != undefined){
      width = event.target.innerWidth;
      // console.log(event.target.innerWidth);
    }
    else{
      // console.log(document.body.clientWidth);
      width = document.body.clientWidth;
    }

    if (width >= 720) {
      this.openSidenavFlag = false;
    } 
    else {
      this.openSidenavFlag = true;
    }

  }

Plunker demo

How to change width of a Sidenav in Angular Material Design?

In angular material, md-sidenav has these attributes:

width: 304px;
min-width: 304px;

That's why the width will be fixed at 304 px no matter what device you use.
So if you want to change your sidenav width you'll have to change the css a bit.

If you're fine with supporting only modern browsers, you can change it to a vw measure (1/100th of the viewport width) and add it to a separate css file. The code will look something like this:

md-sidenav, 
md-sidenav.md-locked-open, 
md-sidenav.md-closed.md-locked-open-add-active {
    min-width: 200px !important;
    width: 85vw !important;
    max-width: 400px !important;
} 

Here's a plunker: http://plnkr.co/edit/cXfJzxsAFXA3Lh4TiWUk?p=preview

Resizeable angular-material drawer with collapsing content

Just remove the [enableGhostResize]="true" and use the (resizing) event instead of the (resizingEnd)

  <mat-drawer class="custom-drawer" mode="side" opened mwlResizable [ngStyle]="resizeStyle" [validateResize]="resizeValidate" [resizeEdges]="{right: true}" (resizing)="onResizeEnd($event)">

https://angular-kepsi2-bvnviu.stackblitz.io/

---

Related Topics