fix: Merge pull request #105 from leonardobazico/master

fix: Make performLocalElementUpdates wait for document ready

Author: rubyboy

README.md

@@ -286,4 +286,60 @@ Add these lines to header of index.html
 <script type="text/javascript" src="vendor/jquery/dist/jquery.min.js"></script>
 <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 ```
+#### Installing & configuring angular2-materialize in projects created with angular-cli@webpack (1.0.0-beta.11-webpack.8)
+
+Install MaterializeCSS and angular2-materialize from npm
+```
+npm install materialize-css --save
+npm install angular2-materialize --save
+```
+
+Jquery is required
+```
+npm install jquery@^2.2.4 --save
+```
+
+add scripts in angular-cli.json
+```
+"scripts": [
+  "../node_modules/jquery/dist/jquery.js",
+  "../node_modules/materialize-css/dist/js/materialize.js"
+],
+```
+
+Import MaterializeModule in app.module.ts
+```
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+
+import { MaterializeModule } from 'angular2-materialize';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [ AppComponent ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpModule,
+    MaterializeModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+```
+
+Add these lines to header of index.html
+```
+<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+```
+
+Import materialize.css in style.css
+```
+/* You can add global styles to this file, and also import other style files */
+@import "../node_modules/materialize-css/dist/css/materialize.css";
+```
 

src/materialize-directive.ts

@@ -32,6 +32,7 @@ export class MaterializeDirective implements AfterViewInit,DoCheck,OnChanges,OnD
     private _params:[any] = null;
     private _functionName:string = null;
     private previousValue = null;
+    private _waitFunction: any = { };
 
     private changeListenerShouldBeAdded = true;
 
@@ -156,37 +157,47 @@ export class MaterializeDirective implements AfterViewInit,DoCheck,OnChanges,OnD
 
       this.performLocalElementUpdates();
     }
-    
+
     private performLocalElementUpdates(functionName=this._functionName) {
-      if (functionName) {
-        const jQueryElement = $(this._el.nativeElement);
-        if (jQueryElement[functionName]) {
-          if (this._params) {
-            if (this._params instanceof Array) {
-              jQueryElement[functionName](...this._params);
-            } else {
-              throw new Error("Params has to be an array.")
-            }
-          } else {
-            jQueryElement[functionName]();
-          }
-        } else {
-          // fallback to running this function on the global Materialize object
-          if (Materialize[functionName]) {
+      if (this._waitFunction[functionName]) {
+        return;
+      }
+
+      this._waitFunction[functionName] = true;
+
+      $(document).ready(() => {
+        this._waitFunction[functionName] = false;
+
+        if (functionName) {
+          const jQueryElement = $(this._el.nativeElement);
+          if (jQueryElement[functionName]) {
             if (this._params) {
               if (this._params instanceof Array) {
-                Materialize[functionName](...this._params);
+                jQueryElement[functionName](...this._params);
               } else {
-                throw new Error("Params has to be an array.")
+                throw new Error("Params has to be an array.");
               }
             } else {
-              Materialize[functionName]();
+              jQueryElement[functionName]();
             }
           } else {
-            throw new Error("Couldn't find materialize function ''" + functionName + "' on element or the global Materialize object.");
+            // fallback to running this function on the global Materialize object
+            if (Materialize[functionName]) {
+              if (this._params) {
+                if (this._params instanceof Array) {
+                  Materialize[functionName](...this._params);
+                } else {
+                  throw new Error("Params has to be an array.");
+                }
+              } else {
+                Materialize[functionName]();
+              }
+            } else {
+              throw new Error("Couldn't find materialize function ''" + functionName + "' on element or the global Materialize object.");
+            }
           }
         }
-      }
+      });
     }
 
     private isTooltip(){
@@ -218,4 +229,4 @@ export class MaterializeDirective implements AfterViewInit,DoCheck,OnChanges,OnD
     event.initEvent(eventType, true, true);
   }
   target.dispatchEvent(event);
-};*/
+};*/