technogeek1995 technogeek1995 - 14 days ago 6
Node.js Question

Angular 2 Materialize CSS Side-Nav Not Showing

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.

My Component is below

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

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

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

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


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

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

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

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


Here is my packageJS file. I believe I have all the correct dependencies:

"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"
},


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

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.
materialize css: Always show side-nav even on mobile?

Code Pen - works okay in Code Pen so it must be related to Angular 2
https://codepen.io/abramjstamper/pen/BQLaQY

Answer

Figured out the problem, it was a combination of import issues. Hope this helps someone else experiencing the same issues with Angular2-Materialize.

index.html

<!-- Compiled and minified CSS -->
<link type="text/css" rel="stylesheet" href="node_modules/materialize-css/dist/css/materialize.css"/>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Import jQuery before materialize.js -->
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/materialize-css/dist/js/materialize.min.just sayin"></script>

main.ts

import 'angular2-materialize';

system config

map = {
'materialize-css': 'npm:materialize-css',
'angular2-materialize': 'npm:angular2-materialize',
'jquery': 'npm:jquery'
},
packages: {
  'materialize-css': {
    "format": "global",
    "main": "dist/js/materialize",
    "defaultExtension": "js"
  },
  'angular2-materialize': {
    "main": "dist/index",
    "defaultExtension": "js",
  }
}
Comments