Angular 2 Materialize CSS Side-Nav Not Showing
<p>I'm using Angular 2 with materialize-CSS. The issue I'm having is when I shrink the page to where the hamburger appears for the side-nav, after I click the hamburger, the side-nav never pops up and the screen darkens significantly. It never slides out like it should.</p>

<p>My Component is below</p>

<pre><code>import { Component, OnInit, ElementRef } from '@angular/core';
declare var jQuery: any;

@Component({
  selector: 'core-app',
  template: `
  &lt;div class="navbar"&gt;
  &lt;nav class="indigo"&gt;
  &lt;div class="nav-wrapper"&gt;
    &lt;a href="/" class="brand-logo"&gt;{{title}}&lt;/a&gt;
    &lt;a href="#" data-activates="nav-mobile" class="button-collapse" materialize="sideNav"
    [materializeParams]="[{menuWidth: 300,edge: 'left', closeOnClick: true, draggable: true}]"&gt;&lt;i class="material-icons"&gt;menu&lt;/i&gt;
    &lt;/a&gt;
  &lt;ul class="right hide-on-med-and-down"&gt;
    &lt;li&gt;&lt;a routerLink="/dashboard"&gt;Dashboard&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a routerLink="/fast"&gt;Fast Words&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;extra link&lt;/li&gt;
    &lt;li&gt;Logout&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul id="nav-mobile" class="side-nav"&gt;
    &lt;li&gt;&lt;a routerLink="/dashboard"&gt;Dashboard&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a routerLink="/fast"&gt;Fast Words&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a routerLink="/dashboard"&gt;Dashboard&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a routerLink="/fast"&gt;Fast Words&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
&lt;/nav&gt;
&lt;/div&gt;       
&lt;router-outlet&gt;&lt;/router-outlet&gt;
`

})
export class AppComponent implements OnInit {
  title = 'Rapid Words';

  constructor(private el:ElementRef){}
  ngOnInit() {
    jQuery(this.el.nativeElement).find('.button-collapse').sideNav();
  }
}
</code></pre>

<p>This is my index.html page. I commented out materialize CSS/jQuery, but then I lost all my styles.</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Language Forge | Review &amp; Rapid Words&lt;/title&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;

&lt;!-- 1. Load libraries --&gt;
&lt;!-- Import Materialize CSS --&gt;
&lt;script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css"&gt;
&lt;link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"&gt;&lt;/script&gt;

&lt;!-- Polyfill(s) for older browsers --&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"&gt;&lt;/script&gt;
&lt;script src="node_modules/core-js/client/shim.min.js"&gt;&lt;/script&gt;
&lt;script src="node_modules/zone.js/dist/zone.js"&gt;&lt;/script&gt;
&lt;script src="node_modules/reflect-metadata/Reflect.js"&gt;&lt;/script&gt;
&lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
&lt;!-- 2. Configure SystemJS --&gt;
&lt;script src="systemjs.config.js"&gt;&lt;/script&gt;
&lt;script&gt;
  System.import('app').catch(function(err){ console.error(err); });
&lt;/script&gt;
&lt;/head&gt;
&lt;!-- 3. Display the application --&gt;
&lt;body&gt;
&lt;base href="/"&gt;
&lt;core-app&gt;Loading...&lt;/core-app&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Here is my packageJS file. I believe I have all the correct dependencies:</p>

<pre><code>"dependencies": {
"@angular/common": "~2.1.1",
"@angular/compiler": "~2.1.1",
"@angular/core": "~2.1.1",
"@angular/forms": "~2.1.1",
"@angular/http": "~2.1.1",
"@angular/platform-browser": "~2.1.1",
"@angular/platform-browser-dynamic": "~2.1.1",
"@angular/router": "~3.1.1",
"@angular/upgrade": "~2.1.1",
"angular-in-memory-web-api": "~0.1.13",
"angular2-materialize": "^6.1.1",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"jquery": "^2.2.4",
"materialize-css": "^0.97.8",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.39",
"zone.js": "^0.6.25"
},
"devDependencies": {
"@types/core-js": "^0.9.34",
"@types/node": "^6.0.45",
"concurrently": "^3.0.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.3"
},
</code></pre>

<p>How can I resolve this so that side-nav slides out like it should?</p>

<p>Related stack overflow question, but does not solve my problem because I'm using angular 2. After adding this style tag to my component, the side-nav shows, but doesn't let me click off of it, and the screen stays dark.
<a href="https://stackoverflow.com/questions/38411933/materialize-css-always-show-side-nav-even-on-mobile">materialize css: Always show side-nav even on mobile?</a></p>

<p>Code Pen - works okay in Code Pen so it must be related to Angular 2
<a href="https://codepen.io/abramjstamper/pen/BQLaQY" rel="nofollow noreferrer">https://codepen.io/abramjstamper/pen/BQLaQY</a></p>