Code Monkey home page Code Monkey logo

angular2-materialize's Introduction

Angular2 Materialize

travis build version downloads MIT Licence semantic-release Commitizen friendly PRs Welcome

NPM NPM

Angular 2 support for Materialize CSS framework http://materializecss.com/

This library adds support for the Materialize CSS framework in Angular 2. It is needed to add the dynamic behavior of Materialize CSS that is using JavaScript rather than plain CSS.

View demo here: https://infomedialtd.github.io/angular2-materialize/

To use the library you need to import it once per project and then use its MaterializeDirective directive for binding it to any component that needs a dynamic behavior, like collapsible panels, tooltips, etc.

Using angular2-materialize

Start by following the Angular CLI or webpack instructions below to add the required dependencies to your project.

Add the MaterializeModule to your NgModule:

import { MaterializeModule } from "angular2-materialize";

@NgModule({
  imports: [
    //...
    MaterializeModule,
  ],
  //...
})

In your component, use it for dynamic behavior. For example, for collapsible panels:

@Component({
    selector: "my-component",
    template: `
        <ul materialize="collapsible" class="collapsible" data-collapsible="accordion">
          <li>
            <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
            <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
          </li>
          <li>
            <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
            <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
          </li>
          <li>
            <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
            <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
          </li>
        </ul>

Apply an empty MaterializeDirective attribute directive for top level components, like forms:

<form materialize class="col s12">
  <div class="row">
    <div class="input-field col s6">
      <input placeholder="Placeholder" id="first_name" type="text" class="validate">
      <label for="first_name">First Name</label>
    </div>
  </div>
</form>

The MaterializeDirective attribute directive (materialize) accepts any MaterializeCSS initialization call to apply to the element. The list of supported functions are provided by MaterializeCSS. Examples: collapsible, modal, tooltip, dropdown, tabs, material_select, sideNav, etc.

For example, to apply tooltip:

<a materialize="tooltip" class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am tooltip">Hover me!</a>

The Materialize attribute directive also allows specifying parameters to be passed to the function, but providing a materializeParams attribute returning an array of params. Use it with a function call or even by inlining the params in the HTML.

Another useful option is emitting actions on an element. You may want to do that for calling Materialize functions, like closing a modal dialog or triggering a toast. You can do that by setting the materializeActions attribute, which accepts an EventEmitter. The emitted events can either be a "string" type action (Materialize function call) or a structure with action and parameters:

The example below shows how you'd create a modal dialog and use the actions to open or close it.

<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" (click)="openModal()">Modal</a>

<!-- Modal Structure -->
<div id="modal1" class="modal bottom-sheet" materialize="modal" [materializeParams]="[{dismissible: false}]" [materializeActions]="modalActions">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>A bunch of text</p>
  </div>
  <div class="modal-footer">
    <a class="waves-effect waves-green btn-flat" (click)="closeModal()">Close</a>
    <a class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
  </div>
</div>
  import {MaterializeAction} from 'angular2-materialize';
  //...
  modalActions = new EventEmitter<string|MaterializeAction>();
  openModal() {
    this.modalActions.emit({action:"modal",params:['open']});
  }
  closeModal() {
    this.modalActions.emit({action:"modal",params:['close']});
  }

For dynamic select elements apply the materializeSelectOptions directive to trigger element updates when the options list changes:

<select materialize="material_select" [materializeSelectOptions]="selectOptions">
  <option *ngFor="let option of selectOptions" [value]="option.value">{{option.name}}</option>
</select>

Installing & configuring angular2-materialize in projects created with the Angular CLI

Install MaterializeCSS and angular2-materialize from npm

npm install materialize-css --save
npm install angular2-materialize --save

jQuery 2.2 and Hammer.JS are required

npm install jquery@^2.2.4 --save
npm install hammerjs --save

Edit the angular-cli.json :

  • Go to section apps and find styles array inside it (with only styles.css value by default), add the following line inside array before any styles:
  "../node_modules/materialize-css/dist/css/materialize.css"
  • Go to section apps and find scripts array inside it, and add the following lines inside array
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/hammerjs/hammer.js",
  "../node_modules/materialize-css/dist/js/materialize.js"

Add to the top of app.module.ts

import { MaterializeModule } from 'angular2-materialize';

Add MaterializeModule inside imports array of @NgModule decorator in app.module.ts

Add this line to header of index.html

<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Installing and configuring angular2-materialize with webpack

Install MaterializeCSS and angular2-materialize from npm

npm install materialize-css --save
npm install angular2-materialize --save

MaterializeCSS required jQuery and HammerJS. Check the exact version materialize-css is compatible with:

npm install jquery@^2.2.4 --save
npm install hammerjs --save

Add the Google MD fonts to your index.html:

<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Import materialize-css styles:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">

Add the following plugin to your webpack configuration to provide jQuery:

const ProvidePlugin = require('webpack/lib/ProvidePlugin');
module.exports = {
  //...
  plugins: [
      new ProvidePlugin({
          "window.jQuery": "jquery",
          Hammer: "hammerjs/hammer"
      })
  ]
  //...
};

Import MaterializeCSS programatically, in the same place where you import angular2-materialize module (usually in your main module, or shared module):

import 'materialize-css';
import { MaterializeModule } from 'angular2-materialize';

Loading additional resources

Another thing you would need to confirm is being able to load web fonts properly:

{ test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/, loader: 'url-loader?limit=100000' },

Notice that the url-loader is required for this to work (npm install it).

The following example project is a fork of the angular2-webpack-starter with the addition of angular2-materialize: InfomediaLtd/angular2-webpack-starter

angular2-materialize's People

Contributors

allahbaksh avatar counsellorben avatar criticalbh avatar enumc avatar hendrikschneider avatar juanpmarin avatar kelber avatar leonardobazico avatar luketn avatar maistho avatar milosstanic avatar nelsonmorais avatar pawelhertman avatar ravenjohn avatar rubyboy avatar sixthdim avatar unseen1980 avatar willnye avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

angular2-materialize's Issues

Question about tabs

I want to use tabs like in original materialize-css project. And In you exampel tabs are used only for navigation. Do you have any suggestion how to implement them to follow original structure?

I don't want to use brute solution like bunch of *ngIf calls...(and not sure if it is really possible)

In other hand it's quite nice to load content for each tab separately...But it looks too complex because not all pages contain tabs (in my app)... And each page that contains tabs contains different set of tabs....

I'm open to hear any suggestion :)

SideNav strange behavior

Hi,
I try to install the materialize mobile nabar.
I get a strange behavior: on large screen, menu is above the container of my page. On smaller screen, sideNav mobile menu disappears. Here my code for a web mobile app:

home.component.html
`



`

home.component.ts
`import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import {MaterializeDirective} from "angular2-materialize";

@component({
selector: 'swp-home',
templateUrl: 'app/memberarea/home.component.html',
directives: [MaterializeDirective],
styles: [li.active { background-color: #ee6e73 }]
})
export class SwpHomeComponent {

}`

I want to say that Angular2 directive are well integrated in the project.

Thank you for any help.

Datepicker issue

First all, thanks for sharing!! I try with your directive but when put a datepicker i have some issues, in your example page in the form section the date picker don't show. In my project when put a datepicker or a reveal card (activator class) the icons doesn't show only text on all my project, but i think maybe is because i try to load components dynamically and routing in the same way. But the issue with datepicker is different from my configurations. Thanks for all!!!

Angular CLI

I'm a bit confused on how to set this up. I'm using Angular CLI, so I know it's a bit different, but nothing i've tried works. Anyone have get this to work with Angular CLI or have suggestions?

Can't pass variable to tooltip

Hi,
I've been trying to pass a variable to a tooltip. It just renders the variable name, not value. If I pass it within double curly brackets, Angular reports an error.

Any solution?

sideNav is not sliding out

hi, its may be not an issue with angular2-materialize itself but i am having a weird problem , when i click on the button background fades out but sidenav is not poping out .

 <ul id="slide-out" class="side-nav">
            <li><a href="#!">First Sidebar Link</a></li>
            <li><a href="#!">Second Sidebar Link</a></li>
        </ul>
        <a href="#" materialize="sideNav" data-activates="slide-out" class="button-collapse show-on-large"><i class="material-icons">menu</i></a>

if i make it fixed nav then it shows its just on click its not sliding out , please if have any suggestion.

Webpage CSS turns non-responsive when modal is open and we try to change zoom %

When a modal is open and one tries to change the zoom % of the web page (Ctrl +, Ctrl -) the UI does not scale properly for the background webpage (modal scales properly).
Images:
Default (No Zoom)
http://prntscr.com/ayinq4, http://prntscr.com/ayio1d (modal open)
Zoomed in
http://prntscr.com/ayiobj (Modal opened after zooming in)
http://prntscr.com/ayiott (Modal opened before zooming in)

Link for reference:
https://github.com/Dsupreme/Ang2
(I setup a basic project. I documented all the steps in setting up such a project. Please follow the readme.md in case any concerns.)

Can't get Materialize to work in Angular 2 with Web Pack

I have a problem at time i install materialize with web pack it throws this exception:
ORIGINAL EXCEPTION: Error: Couldn't find materialize function ''tabs' on element or the global Materialize object.

Its in all the functions of materialize, i made the installation by webpack. and this is my webpack configuration:

var sliceArgs = Function.prototype.call.bind(Array.prototype.slice);
var toString = Function.prototype.call.bind(Object.prototype.toString);
var path = require('path');
var webpack = require('webpack');
// Webpack Plugins
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;

module.exports = {
devtool: 'source-map',
// devtool: 'eval',

//
entry: {
'vendor': [
// Polyfills
'core-js/es6',
'core-js/es7/reflect',
'zone.js/dist/zone',
'zone.js/dist/long-stack-trace-zone',
// Angular2
'@angular/common',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/core',
'@angular/router',
'@angular/router-deprecated',
'@angular/http',
// RxJS
'rxjs',
// Other
'angular2-jwt'
],
'app': [
'./src/index'
]
},

// Config for our build files
output: {
path: root('build'),
filename: '[name].js',
// filename: '[name].[hash].js',
sourceMapFilename: '[name].js.map',
chunkFilename: '[id].chunk.js'
// publicPath: 'http://mycdn.com/'
},

resolve: {
root: __dirname,
alias: {
materializecss: 'node_modules/materialize-css/dist/css/materialize.css',
materialize: 'node_modules/materialize-css/dist/js/materialize.js'
},
extensions: [
'',
'.ts',
'.js',
'.json',
'.css',
'.html'
]
},

module: {
preLoaders: [ { test: /.ts$/, loader: 'tslint-loader' } ],
loaders: [
// Support for .ts files.
{
test: /.ts$/,
loader: 'ts-loader',
query: {
'ignoreDiagnostics': [
2403, // 2403 -> Subsequent variable declarations
2300, // 2300 Duplicate identifier
2304, // 2304 Cannot find name
2374, // 2374 -> Duplicate number index signature
2375 // 2375 -> Duplicate string index signature
]
},
exclude: [ /.spec.ts$/, /.e2e.ts$/, /node_modules/ ]
},

  // Support for *.json files.
  { test: /\.json$/,  loader: 'json-loader' },

  // Support for CSS as raw text
  { test: /\.css$/,   loader: 'raw-loader' },

  // support for .html as raw text
  { test: /\.html$/,  loader: 'raw-loader' },

  //Materialize CSS
  {
    test: /materialize-css\/dist\/js\/materialize\.js/,
    loader: 'imports?materializecss'
  },
  { test: /materialize\.css$/,   loader: 'style-loader!css-loader' },
  { test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/, loader: 'url-loader?limit=100000' },
],
noParse: [
 /zone\.js\/dist\/.+/,
 /reflect-metadata/,
 /es(6|7)-.+/,
 /.zone-microtask/, 
 /.long-stack-trace-zone/
]

},

plugins: [
new CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.js', minChunks: Infinity }),
new CommonsChunkPlugin({ name: 'common', filename: 'common.js', minChunks: 2, chunks: ['app', 'vendor'] }),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"root.jQuery": "jquery",
Hammer: "hammerjs/hammer"
})
],

// Other module loader config
tslint: {
emitErrors: false,
failOnHint: false
},

// our Development Server configs
// our Webpack Development Server config
devServer: {
historyApiFallback: true,
publicPath: '/build'
}
};

function getBanner() {
return 'This is a sample that shows how to add authentication to an Angular 2 (ng2) app by @auth0';
}

function root(args) {
args = sliceArgs(arguments, 0);
return path.join.apply(path, [__dirname].concat(args));
}
function rootNode(args) {
args = sliceArgs(arguments, 0);
return root.apply(path, ['node_modules'].concat(args));
}

Can anyone help me please ???

Materialize and Webpack issue

Hey,

I was using this starter https://github.com/AngularClass/angular2-webpack-starter and the default prod config.

I encountered a little issue while using materialize and webpack. The build both in dev and prod mode were OK, however when i tried to reach my website i had this error :
materialize.js:238 Uncaught TypeError: Cannot convert undefined or null to object

I then unminified it and it worked.

Hope it helps !
Great job on the component anyway !

Script Error in index.ts

Hi,

I just try to use angular2-materialize with my latest project. I am very exciting to kick-start my project with angular2-seed and and angular2-materialize.

I setup my project and with angular2-seed and just add the angular2-materialize, and just stuck with an error:

(index):75 Error: ReferenceError: Waves is not defined(โ€ฆ) "Report this error at https://github.com/mgechev/angular2-seed/issues"(anonymous function) @ (index):75ZoneDelegate.invoke @ zone.js?1467571370075:323Zone.run @ zone.js?1467571370075:216(anonymous function) @ zone.js?1467571370075:571ZoneDelegate.invokeTask @ zone.js?1467571370075:356Zone.runTask @ zone.js?1467571370075:256drainMicroTaskQueue @ zone.js?1467571370075:474ZoneTask.invoke @ zone.js?1467571370075:426

I debug the issue and found that file "src/index.ts" have a declare statement i.e

declare var Waves:any; Waves.displayEffect();

This statement cause issue. As Waves declare with any so there is no method with name displayEffect() exists.

So, Can you please create or remove these statement from final build.

ngModel doesn't work with multiple select

Hi,

I can't get ngModel to bind to selected values in a multi-select (but single select works fine). I think the problem is that no event is being emitted when new values are selected. See sample code below. The onChange function isn't called when values are selected in the multi-select.

Sample html code:

    <div class="input-field">
          <select materialize="material_select" [ngModel]="shippingCountriesTemp 
                       (ngModelChange)="onChange($event)" multiple>
                             <option value="" disabled selected>Click Here for Options</option>
                             <option *ngFor="let country of countryOptions" [value]="country">{{country}}</option>
           </select>
           <label>Countries You Ship To</label>
    </div>

onChange function (in .ts file) just prints the event value to screen:

onChange(r) { console.log(r); }

Issue with bottom sheet style modals and buttons with wave-effect

It looks like bottom-sheet modals does not play very well with buttons using the waves-effect class. The first time the modal is opened, the button is visible, but the next time, the button is gone. So it seems.

Using the inspect tool reveals that the button is still there. You can click the button, and in the moment you do, it 'magically' appears.

<div id="errorModal" class="modal bottom-sheet">
    <div class="modal-content">
        Blah blah
    </div>
    <div class="modal-footer">
        <a class="modal-action modal-close btn-flat waves-effect waves-red">Oh well</a>
    </div>
</div>

Character counter

Is it possible to add the character counter to the list of possibilities? Adding materialize to the input-field does not add a counter when a length="20" is specified

Tooltip Issue

Hey !

I am having a pretty weird issue with tooltips.

When i hover an link, the tooltip appear and disappear as expected.
However when i click on it , the tooltip stays, by looking at the html it looks like a tooltip with a brand new id got created and stays displayed.
click again keeps on creating new displayed tool tip.

Any idea where this could come from ?

piece of code in question :

<a  (click)="selectEnv(env)"  materialize="tooltip" data-position="top" data-delay="10" data-tooltip="Select Environment" ><i class=" fa fa-square fa-fw "  ></i></a>

Update:

This comes from a (click) event on the tooltip source. Removing the (click) event makes the bug disapear.

model/function binding

I am trying to bind model or function to dropdown but I am still unsuccessful. This is what I have tried:
`


<select id="{{id}}" (change)="alert()" materialize="material_select">
Choose your option
<template ngFor #option [ngForOf]="options">
<option value="{{option.value}}" *ngIf="option.selected" selected>{{ option.name }}
<option value="{{option.value}}" *ngIf="!option.selected">{{ option.name }}

`

But this is not working since this is later changed to list in dom. Can anyone show me how to bind model and function to particual example?

(edit) sorry, lately I have saw model is working but still I can not create on change event to work?

(edit nr2) one of the solution for tracking value changes is (ngModelChange) e.g. <select id="{{id}}" (ngModelChange)="alert()" materialize="material_select">

Datepicker don't bind value to ngModel

Hi all!

First, thank you for your awesome work!

Datepicker seems to be working, value is reported to input, but I still have no value in my [(ngModel)]="object.date"

Did I miss something ? Thank you for your feedback.

Add installation guide for a project created with angular-cli

Hi, I read your suggestions and saw your suggestions how setup projects, generated with angular-cli and would suggest some changes to the setup.

In your solution you modify the configuration in system-config.ts directly but this part in the file is handled by angular-cli. Therefore we should configure it in the user configuration part in the top.

/** Map relative paths to URLs. */
const map: any = {
   "materialize": "vendor/materialize-css",
   "angular2-materialize": "vendor/angular2-materialize",
   "jquery": "vendor/jquery"
};

/** User packages configuration. */
const packages: any = {
  'materialize': {
    "format": "global",
    "main": "dist/js/materialize",
    "defaultExtension": "js"
  },
  'angular2-materialize': {
    "main": "dist/index",
    "defaultExtension": "js"
  }
};

@output

i use
@output() mychange = new EventEmitter();
instead off

// handle select changes from the HTML
if (this.isSelect() && this.changeListenerShouldBeAdded) {
const nativeElement = this._el.nativeElement;
const jQueryElement = $(nativeElement);
jQueryElement.on("change", e => nativeElement.dispatchEvent(new Event("input")));
this.changeListenerShouldBeAdded = false;
}
and i change this

public ngDoCheck() {
const nativeElement = this._el.nativeElement;
if (nativeElement.value!='' && nativeElement.value!=this.previousValue) {
this.previousValue = nativeElement.value;
* this.mychange.emit(nativeElement.value);*
this.performLocalElementUpdates();
}
return false;
}

i hope it's good

Parallax

Hi,
I try to use parallax feature.

`

`

This not work. How it's work, i havn't found nothing in the docs about that.

cannot get it to work with angular2 webpack starter

I installed both materialize-css and angular2-materialize using npm
I don't know why it gives this error on building!

ERROR in ./~/angular2-materialize/dist/index.js
Module not found: Error: Cannot resolve module 'materialize' in C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules\angular2-materialize\dist
resolve module materialize in C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules\angular2-materialize\dist
  looking for modules in C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules
    C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules\materialize doesn't exist (module as directory)
    resolve 'file' materialize in C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules
      resolve file
        C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules\materialize doesn't exist
        C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules\materialize.ts doesn't exist
        C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules\materialize.js doesn't exist
[C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules\materialize]
[C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules\materialize]
[C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules\materialize.ts]
[C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules\materialize.js]
 @ ./~/angular2-materialize/dist/index.js 1:0-22

here is my webpack config:

// @AngularClass

var webpack = require('webpack');
var helpers = require('./helpers');

var CopyWebpackPlugin = require('copy-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');

var ENV = process.env.ENV = process.env.NODE_ENV = 'development';
var HMR = helpers.hasProcessFlag('hot');

var metadata = {
  title: 'Angular2 Webpack Starter by @gdi2990 from @AngularClass',
  baseUrl: '/',
  host: 'localhost',
  port: 3000,
  ENV: ENV,
  HMR: HMR
};
/*
 * Config
 * with default values at webpack.default.conf
 */
module.exports = helpers.defaults({
  // static data for index.html
  metadata: metadata,
  // devtool: 'eval' // for faster builds use 'eval'

  // our angular app
  entry: { 'polyfills': './src/polyfills.ts', 'main': './src/main.ts' },

  // Config for our build files
  output: {
    path: helpers.root('dist')
  },
  resolve: {
      alias: {
        materializecss: 'materialize-css/dist/css/materialize.css',
        materialize: 'materialize-css/dist/js/materialize.js',
        //...
      }
    },
  module: {
    preLoaders: [
      // { test: /\.ts$/, loader: 'tslint-loader', exclude: [ helpers.root('node_modules') ] },
      // TODO(gdi2290): `exclude: [ helpers.root('node_modules/rxjs') ]` fixed with rxjs 5 beta.3 release
      { test: /\.js$/, loader: "source-map-loader", exclude: [ helpers.root('node_modules/rxjs') ] }
    ],

    loaders: [
      // Support for .ts files.
      { test: /\.ts$/, loader: 'ts-loader', exclude: [ /\.(spec|e2e)\.ts$/ ] },

      // Support for *.json files.
      { test: /\.json$/,  loader: 'json-loader' },

      // Support for CSS as raw text
      { test: /\.css$/,   loader: 'raw-loader' },

      // support for .html as raw text
      { test: /\.html$/,  loader: 'raw-loader', exclude: [ helpers.root('src/index.html') ] },

      { test: /materialize-css\/dist\/js\/materialize\.js/, loader: 'imports?materializecss' },

      { test: /materialize\.css$/,   loader: 'style-loader!css-loader' },

      { test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/, loader: 'url-loader?limit=100000' },

    ]
  },

  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(true),
    new webpack.optimize.CommonsChunkPlugin({ name: 'polyfills', filename: 'polyfills.bundle.js', minChunks: Infinity }),
    // static assets
    new CopyWebpackPlugin([ { from: 'src/assets', to: 'assets' } ]),
    // generating html
    new HtmlWebpackPlugin({ template: 'src/index.html' }),
    // replace
    new webpack.DefinePlugin({
      'process.env': {
        'ENV': JSON.stringify(metadata.ENV),
        'NODE_ENV': JSON.stringify(metadata.ENV),
        'HMR': HMR
      }
    }),
    new webpack.ProvidePlugin({
      jQuery: 'jquery',
      $: 'jquery',
      jquery: 'jquery',
      materialize: 'materialize-css'
    })
  ],

  // Other module loader config

  // our Webpack Development Server config
  devServer: {
    port: metadata.port,
    host: metadata.host
  }
});

I'm not sure if I added them correctly but I followed the instructions (Im new to webpack)

angular2-materialize not start unexpected token error

I have been trying to load angular2-material in a very basic angular2 example. I am having a hard time getting the service to start. I get an error: angular2-polyfills.js:332 Error: SyntaxError: Unexpected token <(โ€ฆ)
Usually this is because of the system.js configuration in my index.html so i was hoping someone could assist me.

here is my system.config settings

`
System.config({

        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            },
            'materialize': {//I think the issue may be with 'main'.  Is this main, reference my main.ts?
                'main': 'dist/js/materialize'
            }
        },
        map: {//not sure if this is necessary
            'materialize': 'node_modules/materialize-css'
        }
    });`

Also, i had a difficult time understanding the jspm installation. I have never used jspm and only have used the system.js installation on the angular 2 page. The jspm install overriding the dependencies did not make sense to me and i was unable to get this to run. Is jspm required for angular2-materialize?

Thank you for the help.

Tabs inside routing-outlet

Hello,
I want to use tabs inside routing outlet,and it is not working with following code:
<li [class]="'tab col s3' + (tab.disabled?' disabled':'')" *ngFor="#tab of tabs">

To fix it for myself I use following syntax:
<li class="tab col s3" [class.disabled]="tab.disabled" *ngFor="#tab of tabs">

Tab routing bug

I've noticed on the tab routing, if you refresh the page on any tab but the first, the line under the tabs always goes to the first tab. It does not match up with the page you are on.

screen shot 2016-06-23 at 2 39 09 pm

I've also seen it happen where, if there is another link other than the tab, that goes to the same route, the line stays on the tab it was previously on instead of moving with the page change.

Thanks for the support!

Can't put it working =/

Hi guys! I am new in Angular 2 and I am having some problems to use angular2-materialize on my Project!

I am not using webpack (barely know what is it) but I've installed all the dependencies though NPM (hammerjs, materialize and materialize-directive) and added manually the JS files on my index.html and I am facing this error:

materialize-directive.js:10 Uncaught ReferenceError: require is not defined(anonymous function) @ materialize-directive.js:10 system.src.js:1085 XHR finished loading: GET "http://localhost:3000/src/main.js".fetchTextFromURL @ system.src.js:1085(anonymous function) @ system.src.js:1646ZoneAwarePromise @ angular2-polyfills.js:589(anonymous function) @ system.src.js:1645(anonymous function) @ system.src.js:2667(anonymous function) @ system.src.js:3239(anonymous function) @ system.src.js:3506(anonymous function) @ system.src.js:3888(anonymous function) @ system.src.js:4347(anonymous function) @ system.src.js:4599(anonymous function) @ system.src.js:337ZoneDelegate.invoke @ angular2-polyfills.js:332Zone.run @ angular2-polyfills.js:227(anonymous function) @ angular2-polyfills.js:576ZoneDelegate.invokeTask @ angular2-polyfills.js:365Zone.runTask @ angular2-polyfills.js:263drainMicroTaskQueue @ angular2-polyfills.js:482$ @ system-polyfills.src.js:1340H @ system-polyfills.src.js:1340R.when @ system-polyfills.src.js:1340T.run @ system-polyfills.src.js:1340t._drain @ system-polyfills.src.js:1340drain @ system-polyfills.src.js:1340e @ system-polyfills.src.js:1340

Some one can help-me?

My scripts:
`

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery-ui/jquery-ui.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="node_modules/hammerjs/hammer.js"></script>
<script src="node_modules/materialize-css/dist/js/materialize.js"></script>

`

Thanks in advance!

EXCEPTION: ReferenceError: Materialize is not defined

I've some problem with integration of angular2-materialize in my Angular2 app.

Here is my code:

index.html:

System.config({
            map: {
                "ng2-translate": "node_modules/ng2-translate",
                "materialize-css": "node-modules/materialize-css",
                "angular2-materialize": "node_modules/angular2-materialize"
            },
            packages:  {
                    dist: {
                    format: 'register',
                    defaultExtension: 'js'
                },
                "ng2-translate": {
                    "defaultExtension": "js"
                },
                "materialize-css": {
                    "main": "dist/js/materialize"
                },
                "angular2-materialize": {
                    "main": "dist/materialize-directive",
                    "defaultExtension": "js"
                }
            }
        });

main.ts:
import "angular2-materialize";

home.component.ts:

import {MaterializeDirective} from "angular2-materialize";

@Component({
    selector: 'swp-home',
    templateUrl: 'app/memberarea/components/home.component.html',
    directives: [RouterLink, MaterializeDirective]
})

Template of my component:
<a materialize="tooltip" class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am tooltip">Hover me!</a>

and here my error:
EXCEPTION: ReferenceError: Materialize is not defined
angular2.dev.js:23730 EXCEPTION: ReferenceError: Materialize is not definedBrowserDomAdapter.logError @ angular2.dev.js:23730BrowserDomAdapter.logGroup @ angular2.dev.js:23741ExceptionHandler.call @ angular2.dev.js:1292(anonymous function) @ angular2.dev.js:12674schedulerFn @ angular2.dev.js:13078SafeSubscriber.__tryOrUnsub @ Rx.js:10775SafeSubscriber.next @ Rx.js:10730Subscriber._next @ Rx.js:10690Subscriber.next @ Rx.js:10667Subject._finalNext @ Rx.js:11191Subject._next @ Rx.js:11183Subject.next @ Rx.js:11142EventEmitter.emit @ angular2.dev.js:13059NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ angular2.dev.js:13477NgZoneImpl.inner.inner.fork.onHandleError @ angular2.dev.js:2233ZoneDelegate.handleError @ angular2-polyfills.js:326Zone.runGuarded @ angular2-polyfills.js:235NgZoneImpl.runInner @ angular2.dev.js:2245NgZone.run @ angular2.dev.js:13560(anonymous function) @ angular2.dev.js:12773schedulerFn @ angular2.dev.js:13078SafeSubscriber.__tryOrUnsub @ Rx.js:10775SafeSubscriber.next @ Rx.js:10730Subscriber._next @ Rx.js:10690Subscriber.next @ Rx.js:10667Subject._finalNext @ Rx.js:11191Subject._next @ Rx.js:11183Subject.next @ Rx.js:11142EventEmitter.emit @ angular2.dev.js:13059NgZone._checkStable @ angular2.dev.js:13500NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.setMicrotask @ angular2.dev.js:13471NgZoneImpl.inner.inner.fork.onHasTask @ angular2.dev.js:2225ZoneDelegate.hasTask @ angular2-polyfills.js:381ZoneDelegate._updateTaskCount @ angular2-polyfills.js:399ZoneDelegate.invokeTask @ angular2-polyfills.js:359Zone.runTask @ angular2-polyfills.js:254drainMicroTaskQueue @ angular2-polyfills.js:473ZoneTask.invoke @ angular2-polyfills.js:425
angular2.dev.js:23730 STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:23730ExceptionHandler.call @ angular2.dev.js:1294(anonymous function) @ angular2.dev.js:12674schedulerFn @ angular2.dev.js:13078SafeSubscriber.__tryOrUnsub @ Rx.js:10775SafeSubscriber.next @ Rx.js:10730Subscriber._next @ Rx.js:10690Subscriber.next @ Rx.js:10667Subject._finalNext @ Rx.js:11191Subject._next @ Rx.js:11183Subject.next @ Rx.js:11142EventEmitter.emit @ angular2.dev.js:13059NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ angular2.dev.js:13477NgZoneImpl.inner.inner.fork.onHandleError @ angular2.dev.js:2233ZoneDelegate.handleError @ angular2-polyfills.js:326Zone.runGuarded @ angular2-polyfills.js:235NgZoneImpl.runInner @ angular2.dev.js:2245NgZone.run @ angular2.dev.js:13560(anonymous function) @ angular2.dev.js:12773schedulerFn @ angular2.dev.js:13078SafeSubscriber.__tryOrUnsub @ Rx.js:10775SafeSubscriber.next @ Rx.js:10730Subscriber._next @ Rx.js:10690Subscriber.next @ Rx.js:10667Subject._finalNext @ Rx.js:11191Subject._next @ Rx.js:11183Subject.next @ Rx.js:11142EventEmitter.emit @ angular2.dev.js:13059NgZone._checkStable @ angular2.dev.js:13500NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.setMicrotask @ angular2.dev.js:13471NgZoneImpl.inner.inner.fork.onHasTask @ angular2.dev.js:2225ZoneDelegate.hasTask @ angular2-polyfills.js:381ZoneDelegate._updateTaskCount @ angular2-polyfills.js:399ZoneDelegate.invokeTask @ angular2-polyfills.js:359Zone.runTask @ angular2-polyfills.js:254drainMicroTaskQueue @ angular2-polyfills.js:473ZoneTask.invoke @ angular2-polyfills.js:425
angular2.dev.js:23730 ReferenceError: Materialize is not defined
at MaterializeDirective.performElementUpdates (http://localhost:3000/node_modules/angular2-materialize/dist/materialize-directive.js:58:13)

Materialize tabs rendering issue

Tabs are not rendering properly if the tab is loaded with the data from the back end using Angular.

for the Below code tabs are rendering fine

        <div class="col s12">
            <ul materialize="tabs" class="tabs">
                 <li  class="tab col s3"><a class='active' href="#test1">hello </a></li>
                 <li  class="tab col s3"><a class='' href="#test2">nice </a></li>

            </ul>
        </div>

but tabs are not loading properly when I use the below

<div class="col s12">
            <ul materialize="tabs" class="tabs">
              <template ngFor let-section [ngForOf]="gridTo.sections" let-i="index+1">
                    <li  *ngIf="section.defaultIndicator ==='Y'" class="tab col s3"><a id="tabsEl1" class='active' href="#test{{i}}">{{gridTo.examName}} : {{section.sectionName}} : {{section.defaultIndicator}} </a></li>
                    <li  *ngIf="section.defaultIndicator ==='N'" class="tab col s3"><a id="tabsEl2" class='' href="#test{{i}}">{{gridTo.examName}} : {{section.sectionName}} : {{section.defaultIndicator}} </a></li>
                </template>
            </ul>
        </div>

After 3 or 4 clicks over the tabs, it's coming properly.

is anyone else faced the issue? Please help me on this.

Datepicker handlers

Hi,

In short, I have 2 questions.

  1. How can I close the datepicker on selection?
  2. Why does this datepicker implementation not suffer from this bug whereas Materialize's one (and mine) does?

Longer explanation:

I understand Materialize uses pickadate.js under the covers. Having checked its API I see there are a range of event callbacks available:
callback_handlers

How can I apply these to the datepicker in Angular 2? I got as far as grabbing the datepicker through

        var $input =$(this.el.nativeElement); // We grab a reference to the datepicker here
        var picker = $input.pickadate('picker');

but there's not a great deal I can do from there. I actually want to close the datepicker on selection and found that an attribute 'closeOnSelect' exists: http://amsul.ca/pickadate.js/date/

Unfortunately, placing this in [materializeParams] doesn't seem to work.

One more thing, I noticed the Datepicker sample here http://angular2-materialize.surge.sh/#/datepicker
does not suffer from this bug whereas Materializes (plus mine) does... can you think of any reasons why? I thought the implementation between both would be near identical...

As always, thank you!
Pieris

Working example with angular2-webpack-starter not working

I've forked your fork of angular2-webpack-starter (to https://github.com/vesteraas/angular2-webpack-starter), and added the following markup to src/app/app.component.ts:

<a materialize="leanModal" [materializeParams]="[{dismissible: false}]" class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>A bunch of text</p>
  </div>
  <div class="modal-footer">
    <a class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
  </div>
</div>

Then I ran the webpack dev server:

npm run server:dev:hmr

In the browser console. I get the following error:

browser_adapter.js:77EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Can't bind to 'materializeParams' since it isn't a known native property ("
<br/>

    <a materialize="leanModal" [ERROR ->][materializeParams]="[{dismissible: false}]" class="waves-effect waves-light btn modal-trigger" href="): App@31:31BrowserDomAdapter.logError @ browser_adapter.js:77BrowserDomAdapter.logGroup @ browser_adapter.js:87ExceptionHandler.call @ exception_handler.js:57(anonymous function) @ application_ref.js:265schedulerFn @ async.js:123SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:112NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.js:120NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.js:66ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
browser_adapter.js:77STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.js:77ExceptionHandler.call @ exception_handler.js:59(anonymous function) @ application_ref.js:265schedulerFn @ async.js:123SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:112NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.js:120NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.js:66ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
browser_adapter.js:77Error: Uncaught (in promise): Template parse errors:
Can't bind to 'materializeParams' since it isn't a known native property ("
<br/>

    <a materialize="leanModal" [ERROR ->][materializeParams]="[{dismissible: false}]" class="waves-effect waves-light btn modal-trigger" href="): App@31:31
    at resolvePromise (zone.js:538)
    at zone.js:574
    at ZoneDelegate.invokeTask (zone.js:356)
    at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (ng_zone_impl.js:36)
    at ZoneDelegate.invokeTask (zone.js:355)
    at Zone.runTask (zone.js:256)
    at drainMicroTaskQueue (zone.js:474)
    at HTMLDocument.ZoneTask.invoke (zone.js:426)

After adding MaterializeDirective to directives in src/app/app.component.ts, the error message goes away, and it works as expected. But the tests are failing:

karma start
...
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  Error: Cannot find module "materialize"
  at /Users/werner/work2/angular2/angular2-webpack-starter/config/spec-bundle.js:70345 <- webpack:///~/angular2-materialize/dist/index.js:2:0

Remove import "materialize" dependency

Hi

I am using angular2-materialize along with meteor and poetic:materialize-scss package.
I do not use npm "materialize" package, so importing angular2-materialize would result in a dependency error.

My solution was to clone the repo and remove the import "materialize", all works.
Here I am not sure why this import is necessary for this package.

Can you please consider removing it ?

Regards

Materialize CSS not being applied for starter pack (materialize fork)

Hi,

I'm on Windows 7 and I've triggered the following commands.

$ git clone --depth 1 https://github.com/InfomediaLtd/angular2-webpack-starter.git
$ cd angular2-webpack-starter/
$ npm install typings webpack-dev-server rimraf webpack -g
$ npm install
$ npm start

I then added import {MaterializeDirective} from "angular2-materialize"; to home.component.ts
and <a materialize="tooltip" class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am tooltip">Hover me!</a> to home.html to test the Materialize element comes through as expect. Unfortunately, even though the hover works, no styling is applied.

I found this link which describes the issue #2 but I'm using the https://github.com/InfomediaLtd/angular2-webpack-starter and the changes to webpack config have already been made. Any help on how I can get styling to come through as part of the configuration would be greatly appreciated.

Not working with multiple select

Hi, it works for normal select but doesn't work when i add multiple attribute to select , it renders but not showing the values by the way i am fetching values from http request, haven't checked for static values.

DropDown Selected Value and ngControl not working

Hi,

The selected value becomes null when Form Submit is triggered using the below code

 <select materialize="material_select"  [materializeSelectOptions]="selectOptions" #genderType (change)="select('genderType',genderType.value)" >
 <option *ngFor="let item of ddGenderType" [value]="item.value">{{item.name}}   </option>
 </select>

And if I add ngControl to it the dropdown list does not get populated. no errors displayed in console.

<select materialize="material_select" ngControl='genderType' [materializeSelectOptions]="selectOptions" #genderType (change)="select('genderType',genderType.value)" > <option *ngFor="let item of ddGenderType" [value]="item.value">{{item.name}}</option> </select>

Form validation

Hi!
I'm trying to figure out how to work with validation. You provide simple seamless with inputs. What about validation for select? I did following :

<select materialize="material_select" [(ngModel)]="model.requested" class="validate" required> <option value disabled selected> </option> <option *ngFor="#requested of reguestFrom" [value]="requested">{{requested}}</option> </select> <label>Request from*</label>

but it doesn't work. Actually I have found workaround but it's not better solution:
<select materialize="material_select" [(ngModel)]="model.requested" class="validate" required>
It's add ng-valid class and I can use it.

Could you please explain me how to use validation for select and how to write custom validation function?

thanks for advance!

Angular 2 Web pack starter production build not working

Hi,
I am using your angular2 webpack starter pack. Everything runs fine on dev build. But on production build everything that requires materialize javascript not working. I am getting this error

browser_adapter.js:77 TypeError: d.each is not a function
at e (materialize.js:236)
at HTMLDivElement.n (materialize.js:236)
at HTMLDivElement. (materialize.js:237)
at Function.v.extend.each (jquery.js:365)
at x as velocity
at HTMLAnchorElement. (materialize.js:1306)
at HTMLUListElement.v.event.dispatch (jquery.js:4737)
at HTMLUListElement.g.handle (jquery.js:4549)
at ZoneDelegate.invokeTask (zone.js:356)
at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (ng_zone_impl.js:36)

I think this is because of UglifyJsPlugin on production build. This is my UglifyJsPlugin config

new UglifyJsPlugin({
// beautify: true, //debug
mangle: false, //debug
dead_code: false, //debug
unused: false, //debug
deadCode: false, //debug
// compress: {
// screw_ie8: true,
// keep_fnames: true,
// drop_debugger: false,
// dead_code: false,
// unused: false
// }, // debug
// comments: true, //debug

  beautify: false, //prod

/* mangle: {
screw_ie8 : true,
keep_fnames: true
}, //prod*/

  compress: {
    screw_ie8: true
  }, //prod

  exclude: ['/materialize.js/g'],
  comments: false //prod
}),

sideNav throws $(...).velocity or menu_id.velocity is not a function

Similar to issue #5 . I have updated my webpack config to the recommended settings:

        alias : {
            materializecss: 'materialize-css/dist/css/materialize.css',
            materialize: 'materialize-css/dist/js/materialize.js',
            jQuery: 'jquery', // I tried this and it didn't change anything
            $: 'jquery'  // I tried this, too, and it didn't change anything
        }

I also found I had to install stylus/stylus-loader because webpack was complaining about not being able to understand .styl files

            test: /materialize\.css$/, loader:
            'style-loader!css-loader'
        }, {
            test: /\.styl$/,
            loader: 'style!css!stylus-loader'
        }
    var cssLoader = {
            test : /^((?!materialize).)*\.css$/,
            // Reference: https://github.com/webpack/extract-text-webpack-plugin
            // Extract css files in production builds
            //
            // Reference: https://github.com/webpack/style-loader
            // Use style-loader in development for hot-loading
            loader : ExtractTextPlugin.extract('style', 'css?sourceMap!postcss')
new webpack.ProvidePlugin({
            $ : "jquery",
            jQuery : "jquery",
            jquery: 'jquery',
            'window.$': 'jquery',
            "window.jQuery": 'jquery',
            "root.jQuery": 'jquery',
            Hammer : "hammerjs/hammer"
        })

My component:

import { Component, OnInit, ElementRef } from 'angular2/core';
import { TodoContext } from './todo-context';
import { TodoContextService } from './todo-context.service';
import { MaterializeDirective } from 'angular2-materialize';
import 'material-icons/css/material-icons.min.css';

let template = `
                <a materialize="sideNav" href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
                <ul id="nav-mobile" class="side-nav fixed">
                    <li class="bold" *ngFor="#context of contexts"><a href="#!">{{context.name}}</a></li>
                </ul>
                <ul id="slide-out" class="side-nav">
                    <li class="bold" *ngFor="#context of contexts"><a href="#!">{{context.name}}</a></li>
                </ul>

`;


@Component({
    selector: 'todo-context',
    directives: [MaterializeDirective],
    template: template,
    styles: [`
        header, main, footer {
            padding-left: 240px;
        }

        @media only screen and (max-width : 992px) {
            header, main, footer {
                padding-left: 0;
            }
        }
        `]
})
export class TodoContextComponent implements OnInit {
    contexts: TodoContext[] = [];

    constructor(private _todoContextService: TodoContextService) { }

    ngOnInit() {
        this._todoContextService.getTodoContexts()
            .then(contexts => this.contexts = contexts);
    }
}

When I make the page smaller to expose the menu icon on the sidenav, and click the menu icon, I see the following in the console

BrowserDomAdapter.logError @ browser_adapter.ts:73ExceptionHandler.call @ exception_handler.ts:52(anonymous function) @ application_ref.ts:258schedulerFn @ async.ts:127SafeSubscriber.__tryOrUnsub @ Subscriber.js:166SafeSubscriber.next @ Subscriber.js:115Subscriber._next @ Subscriber.js:74Subscriber.next @ Subscriber.js:51Subject._finalNext @ Subject.js:124Subject._next @ Subject.js:116Subject.next @ Subject.js:73EventEmitter.emit @ async.ts:113NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.ts:134NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.ts:88ZoneDelegate.handleError @ angular2-polyfills.js:394Zone.runTask @ angular2-polyfills.js:323ZoneTask.invoke @ angular2-polyfills.js:490
browser_adapter.ts:73 TypeError: menu_id.velocity is not a function
    at HTMLAnchorElement.eval (webpack:///./~/materialize-css/dist/js/materialize.js?:2305:25)
    at HTMLAnchorElement.jQuery.event.dispatch (webpack:///./~/jquery/dist/jquery.js?:4737:27)
    at HTMLAnchorElement.elemData.handle (webpack:///./~/jquery/dist/jquery.js?:4549:28)
    at ZoneDelegate.invokeTask (webpack:///./~/angular2/bundles/angular2-polyfills.js?:423:38)

whole bunch of other stuff

I believe this issue is because materialize does some loading before jquery and it's dependencies are all wired up. Looking at my webpack output, I would expect to see jquery/hammer loaded before materialize, correct? But this isn't the case:

    [0] ./src/index.ts 280 bytes {0} [built]
    [1] ./~/jquery/dist/jquery.js 259 kB {0} [built]
    [2] ./~/materialize-css/dist/js/materialize.js 281 kB {0} [built]
    [3] (webpack)/buildin/amd-options.js 43 bytes {0} [built]
    [4] ./~/hammerjs/hammer.js 71.6 kB {0} [built]
    [5] ./~/materialize-css/dist/css/materialize.css 897 bytes {0} [built]
    [6] ./~/css-loader!./~/materialize-css/dist/css/materialize.css 158 kB {0} [built]
    [8] ./~/materialize-css/dist/fonts/roboto/Roboto-Thin.eot 82 bytes {0} [built]

Does anyone have any ideas on how to fix this? I tried the solution in #5 but to no avail.

Select element options from Observable

I tried to populate the options of a select element using an Observable. The options are populated into the select element as can be seen by inspecting the DOM, but the materialize version of the select is empty. Using class='browser-default' allows me to have a functional select box, but obviously is visually undesirable. Any guidance?

Another dev with a similar issue:
http://stackoverflow.com/questions/36887895/multiple-select-in-materialize-css-with-angular2-not-rendering-dynamic-values

How can i make a navbar menu ?

Hi,
i've tried to use these syntax :

<a href="#" data-activates="mobile-demo" materialize="sideNav" class="button-collapse">
        <i class="material-icons">menu</i>
</a>

But when i click on the menu, angular2 restart.
In the materializecss doc, the authors write this :
$(".button-collapse").sideNav();

But how can i do this with Angular ?

Thanks for your help,
best regards

Materialize is not defined exception

I have materialize-css & angular2-materialize loaded in my SystemJS config.
I have: import 'angular2-materialize'; in my main.ts
I have: import {MaterializeDirective} from 'angular2-materialize'; in my component
I have: directives: [MaterializeDirective] in my @Compoent declaration

My component's form element includes the 'materialize' directive, but I get the error:
ReferenceError: Materialize is not defined

Angular 2.0.0beta16

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.