Angular 4 SideNav does not display

Question

I am trying to insert a Material Sidenav into my component. For some reason, when I try to insert a basic sidenav it does not show anything -- main content, button to trigger sidenav, nor side content. I have imported both { MatSidenavModule } and { MatButtonModule} . However, if I comment out the mat-sidenav portion of the code, then the button will appear, so I think it may be an issue with the way I am setting up mat-sidenav.

Here is my HTML code:

<!--product.component.html-->

<h2>Store Inventory</h2>
<div class = "products">
  Remaining: {{displayRemain}}
  Requested: {{displayRequest}}
  {{title}}
  Total: {{cartTotal}}
</div>
<div>
  <mat-sidenav-container class="example-container">
    <mat-sidenav #sidenav class="example-sidenav">
      Sidenav opened!
    </mat-sidenav>
    <div class="example-sidenav-content">
      <button type="button" mat-button (click)="sidenav.open()">
        Open sidenav
      </button>
    </div>
  </mat-sidenav-container>
</div>

Here is the corresponding product.component.ts file: (I took out some functions which I commented out in the HTML)

import { Component, OnInit } from '@angular/core';
import { Product } from '../product';
import { ProductService } from '../product.service';
import {element} from 'protractor';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit {
  products: Product[];
  displayRemain: number;
  displayRequest: number;
  title: string;
  prevRemain: number;
  cartTotal: number;
  constructor(private productService: ProductService) {
  }

  ngOnInit() {
    this.title = 'Not Hello';
    this.displayRemain = 0;
    this.displayRequest = 0;
    this.prevRemain = 10;
    this.cartTotal = 0;
    this.getProducts();
  }

EDIT: got the answer, I didn't install the angular material animation library. Leaving this up in case others have the same problem.

Answer 1

Try to use sidenav.toggle() instead sidenav.open()

Regards