Angular Material: How to set Sidenav/Drawer to be open by default?

I hope this helps you . According to the docs, md-is-openattribute can be

// Controller
$scope.shouldLeftBeOpen = $mdMedia('gt-sm');

<md-sidenav class="md-sidenav-left" md-component-id="left" md-is-open="shouldLeftBeOpen"></md-sidenav>

will help you This problem is little unusual. Since the button from toolbar is controlling the open and close state, I had to add an EventListener to pass the state of sidenav whenever the button is clicked.
Based on the event flag, I added some ngStyle that will maintain the width of sidenav. Note that, the sidenav is always open now [add property opened="true"], since it's always visible. I also ended up using the emitted flag from toolbar to use for 'Sidenav' title. You can remove it if you need to show the partial 'Sid'.

export class ToolbarComponent implements OnInit {

  shortnav = true;

  @Input() sidenav;

  @Output()
  change: EventEmitter<booelan> = new EventEmitter<boolean>();

  constructor() { 
    console.log(this.sidenav);
  }

  ngOnInit() {
  }

  toggle(){
    this.shortnav = !this.shortnav;
    console.log("shortnav: " + this.shortnav)
    this.change.emit(this.shortnav);
  }

}

<button md-button class="toolbar-menu-button"
          (click)="toggle(); isCollapsed = !isCollapsed">

export class SidenavOverviewExample {

  showSidenavTitle = false;
  sidenavWidth = 2.75;

  changeWidth(showShortNav){
    if(showShortNav){
      this.sidenavWidth = 2.5;
      this.showSidenavTitle = false;
    }
    else{
      this.sidenavWidth = 13;
      this.showSidenavTitle = true;
    }
  }
}

<md-sidenav-container fullscreen>
    <md-sidenav #sidenav mode="side"   
                color="primary" 
                opened="true"
                [ngStyle]="{ 'width.em': sidenavWidth }"
                class="animate-sidenav">
     <md-toolbar color="primary">
       <span *ngIf="showSidenavTitle">Sidenav</span>
     </md-toolbar>
        <button md-button class="sidenav-link" (click)="sidenav.close()">
          <md-icon>home</md-icon><span class="title"> HOME</span>
          </button>
          <button md-button class="sidenav-link" (click)="sidenav.close()">
            <md-icon>home</md-icon><span class="title"> HOME</span>
          </button>
      </md-sidenav>

      <app-toolbar [sidenav]="sidenav" (change)="changeWidth($event)"></app-toolbar>

 </md-sidenav-container>

.mat-sidenav-transition .mat-sidenav{
  /* custom animation to grow and shrink width */
  -webkit-transition: width .3s !important; /* For Safari 3.1 to 6.0 */
  transition: width .3s !important;
}

like below fixes the issue You need to add MatSidenavModule in your imports section of @NgModule.
I reproduced your error. See this link:https://plnkr.co/edit/HalfBwhQ0atvlhmCN3An?p=preview In this there is no MatSidenavModule in @NgModule.

This might help you All of this behavior is what you have coded. You've made the button conditional so that it will only show for handset media types. You've also set the drawer to be fixed open in 'side' mode if not a handset. And you placed the toolbar inside the sidenav not above it. Stop doing those things to get the behavior you want:

<mat-toolbar color="primary">
  <button
    type="button"
    aria-label="Toggle sidenav"
    mat-icon-button
    (click)="drawer.toggle()">
    <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
  </button>
  <span class="title">Site Information System</span>
</mat-toolbar>

<mat-sidenav-container class="sidenav-container" autosize>
  <mat-sidenav #drawer class="sidenav" fixedInViewport
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'">
    <mat-toolbar ><div class="menuTitle">Menu</div></mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="#">Dashboard</a>
      <a mat-list-item href="#">Wilton 10 QI</a>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <!-- Add Content Here -->
  </mat-sidenav-content>
</mat-sidenav-container>