feat: Upgraded to angular2-rc5 + removed materialize-css dependency (…

…it now needs to be imported sep

BREAKING CHANGE: Angular2-RC5 modules and no more matarialize-css import (it should be imported

separately)

app/app.component.ts

@@ -1,6 +1,8 @@
 
 import {Component} from "@angular/core";
 import {Location} from '@angular/common';
+
+import "materialize-css";
 import "../src/index";
 
 @Component({

app/app.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule }  from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
 import { LocationStrategy, HashLocationStrategy } from '@angular/common';
 
 import { AppComponent } from './app.component';
@@ -9,7 +10,7 @@ import {
   Dropdown,
   Dialogs,
   Tabs,
-  TabsRouting,
+  //TabsRouting,
   Forms,
   SideNav,
   DatePicker,
@@ -26,14 +27,15 @@ import { routing } from './app.routing'
     Dropdown,
     Dialogs,
     Tabs,
-    TabsRouting,
+    //TabsRouting,
     Forms,
     SideNav,
     DatePicker,
     ModelBindings
   ],
   imports: [
     BrowserModule,
+    FormsModule,
     routing
   ],
   providers: [

app/app.routing.ts

@@ -5,7 +5,7 @@ import {
   Dropdown,
   Dialogs,
   Tabs,
-  TabsRouting,
+  //TabsRouting,
   Forms,
   SideNav,
   DatePicker,
@@ -16,43 +16,43 @@ import {
 const appRoutes: Routes = [
 	{
 		path: '',
-		redirectTo: 'buttons',
+		redirectTo: 'Buttons',
 		pathMatch: 'full'
 	},
 	{
-		path: 'buttons',
+		path: 'Buttons',
 		component: Buttons
 	},
 	{
-		path: 'collapsible',
+		path: 'Collapsible',
 		component: Collapsible
 	},
 	{
-		path: 'dialogs',
+		path: 'Dialogs',
 		component: Dialogs
 	},
 	{
-		path: 'dropdowns',
+		path: 'Dropdown',
 		component: Dropdown
 	},
 	{
-		path: 'forms',
+		path: 'Forms',
 		component: Forms
 	},
 	{
-		path: 'tabs',
+		path: 'Tabs',
 		component: Tabs
 	},
+	// {
+	// 	path: 'TabsRouting',
+	// 	component: TabsRouting
+	// },
 	{
-		path: 'tabs-routing/...',
-		component: TabsRouting
-	},
-	{
-		path: 'datepicker',
+		path: 'DatePicker',
 		component: DatePicker
 	},
 	{
-		path: 'modelbindings',
+		path: 'ModelBindings',
 		component: ModelBindings
 	}
 ];

app/components/forms.ts

@@ -8,7 +8,7 @@ import {Component,OnInit} from "@angular/core"
         <form materialize class="col s12">
           <div class="row">
             <div class="input-field col s6">
-              <input [(ngModel)]="firstName" placeholder="Placeholder" id="first_name" type="text" class="validate">
+              <input [(ngModel)]="firstName" name="firstName" placeholder="Placeholder" id="first_name" type="text" class="validate">
               <label for="first_name">First Name</label>
             </div>
             <div class="input-field col s6">
@@ -57,7 +57,7 @@ import {Component,OnInit} from "@angular/core"
           </div>
           <div class="row">
             <div class="input-field col s6">
-              <select [(ngModel)]="selectedOption" materialize="material_select" [materializeSelectOptions]="selectOptions">
+              <select [(ngModel)]="selectedOption" name="selectedOption" materialize="material_select" [materializeSelectOptions]="selectOptions">
                 <option value="" disabled selected>Choose your option</option>
                 <option *ngFor="let option of selectOptions" [value]="option.value">{{option.name}}</option>
               </select>

app/components/model-bindings/model-bindings.ts

@@ -35,7 +35,7 @@ import {Observable} from "rxjs/Observable";
              <h4>Datepicker model binding</h4>
                 <div class="row">
                     <div class="input-field col s6">
-                            <input type="text" [(ngModel)]="datepicker" materialize="pickadate" [materializeParams]="[{format:'dd/mm/yyyy'}]" />
+                            <input type="text" [(ngModel)]="datepicker" name="datepicker" materialize="pickadate" [materializeParams]="[{format:'dd/mm/yyyy'}]" />
                     </div>
                 </div>
             <p>{{ datepicker }}</p>

app/components/side-nav.ts

@@ -8,7 +8,9 @@ import {Location} from '@angular/common';
       nav {
           height: 0px;
       }
-
+      .side-nav {
+          width: 200px;
+      }
       li.active {
         background-color: #ee6e73
       }
@@ -17,14 +19,16 @@ import {Location} from '@angular/common';
     template: `
       <nav>
         <ul id="slide-out" class="side-nav fixed">
-          <li *ngFor="let routeName of routeNames" [class]="isActive(routeName)?'active':''"><a [routerLink]="[routeName]">{{routeName}}</a></li>
+          <li *ngFor="let routeName of routeNames" routerLinkActive="active"><a [routerLink]="[routeName]">{{routeName}}</a></li>
         </ul>
         <a materialize="sideNav" [materializeParams]="[{edge:'left'}]" href="#" data-activates="slide-out" class="button-collapse show-on-large"><i class="mdi-navigation-menu"></i></a>
+        <a materialize="sideNav" [materializeParams]="[{edge:'left'}]" href="#" data-activates="slide-out" class="button-collapse show-on-large"><i class="mdi-navigation-menu"></i></a>
       </nav>
     `
 })
 export class SideNav {
 
-  private routeNames = ["Buttons", "Collapsible", "Dialogs", "Dropdown", "Forms", "Tabs", "TabsRouting", "DatePicker", "ModelBindings"];
+  //private routeNames = ["Buttons", "Collapsible", "Dialogs", "Dropdown", "Forms", "Tabs", "TabsRouting", "DatePicker", "ModelBindings"];
+  private routeNames = ["Buttons", "Collapsible", "Dialogs", "Dropdown", "Forms", "Tabs", "DatePicker", "ModelBindings"];
 
 }

app/components/tabs-routing.ts

@@ -1,8 +1,12 @@
+export class TabsRouting {}
+
+// todo
+/*
 import {MaterializeDirective} from "../../src/index";
 import {Component,OnDestroy} from "@angular/core"
 import {Subscription} from "rxjs/subscription";
 import {Location} from '@angular/common';
-import { Router } from '@angular/router';
+import { Router, Routes, RouterModule } from '@angular/router';
 
 @Component({selector: "tabs-test1",template: `<div id="test1" class="col s12">Test 1</div>`})
 class TabsTest1 {}
@@ -30,27 +34,18 @@ class TabsTest4 {}
         </div>
     `
 })
-/*@RouteConfig([
-  {path: "/test1", component: TabsTest1, name: "TabsTest1", useAsDefault:true},
-  {path: "/test2", component: TabsTest2, name: "TabsTest2"},
-  {path: "/test3", component: TabsTest3, name: "TabsTest3"},
-  {path: "/test4", component: TabsTest4, name: "TabsTest4"}
-])*/
 export class TabsRouting implements OnDestroy {
 
   private tabs = [
-    {name:"Test 1",href:"/tabs/test1",route:"TabsTest1"},
-    {name:"Test 2",href:"/tabs/test2",route:"TabsTest2"},
-    {name:"Test 3",href:"/tabs/test3",route:"TabsTest3", disabled:true},
-    {name:"Test 4",href:"/tabs/test4",route:"TabsTest4"}
+    {name:"Test 1",href:"/TabsRouting/TabsTest1",route:"TabsTest1"},
+    {name:"Test 2",href:"/TabsRouting/TabsTest2",route:"TabsTest2"},
+    {name:"Test 3",href:"/TabsRouting/TabsTest3",route:"TabsTest3", disabled:true},
+    {name:"Test 4",href:"/TabsRouting/TabsTest4",route:"TabsTest4"}
   ];
   private routerSubscription:Subscription;
   private tabSelectionParams = null;
 
   constructor(private router:Router, private location:Location) {
-    /*this.routerSubscription = <Subscription>router.parent.subscribe(() => {
-      this.updateSelectionParams(router);
-    });*/
   }
 
   routeTo(route) {
@@ -73,3 +68,19 @@ export class TabsRouting implements OnDestroy {
     this.routerSubscription.unsubscribe();
   }
 }
+
+const routes: Routes = [
+  {
+    path: 'TabsRouting',
+    component: TabsRouting,
+    children: [
+      { path: 'TabsTest1', component: TabsTest1 },
+      { path: 'TabsTest2', component: TabsTest2 },
+      { path: 'TabsTest3', component: TabsTest3 },
+      { path: 'TabsTest4', component: TabsTest4 }
+    ]
+  }
+];
+
+export const routing = RouterModule.forChild(routes);
+*/