Include MDL JS in DashboardComponent

wtg · Apr 25, 2017 · 6ccad1e · 6ccad1e
1 parent c8eac0b
commit 6ccad1e
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/web/app/dashboard/MaterialDesignLiteUpgradeElement.ts b/web/app/dashboard/MaterialDesignLiteUpgradeElement.ts
@@ -0,0 +1,14 @@
+import { Directive, AfterViewChecked } from '@angular/core';
+
+declare var componentHandler: any;
+
+@Directive({
+  selector: '[mdl]'
+})
+
+// http://stackoverflow.com/a/39040342/6432160
+export class MDL implements AfterViewChecked {
+  ngAfterViewChecked() {
+    componentHandler.upgradeAllRegistered();
+  }
+}
diff --git a/web/app/dashboard/dashboard.module.ts b/web/app/dashboard/dashboard.module.ts
@@ -4,11 +4,12 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { FormsModule } from '@angular/forms';
 import { HttpModule, JsonpModule } from '@angular/http';
 
+import { MDL } from './MaterialDesignLiteUpgradeElement';
 import { DashboardComponent }   from './dashboard.component';
 import { ShuttleFormComponent} from '../shuttleform/shuttleform.component';
 @NgModule({
     imports: [BrowserModule, FormsModule, HttpModule, JsonpModule],
-    declarations: [DashboardComponent, ShuttleFormComponent],
+    declarations: [DashboardComponent, ShuttleFormComponent, MDL],
     bootstrap: [DashboardComponent]
 })
 export class DashboardModule { }

diff --git a/web/views/partials/dashboard.html b/web/views/partials/dashboard.html
@@ -1,4 +1,4 @@
-<div class="dashboard-container">
+<div class="dashboard-container" mdl>
 
 
   <!-- <div class="search-container">
@@ -99,6 +99,7 @@ <h2 class="mdl-card__title-text">{{shuttleGroup.origin[0].name}}
                 </p>
               </div>
               <div class="mdl-card__actions mdl-card--border">
+                <!-- TODO disable if user is already signed up -->
                 <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                   Sign Up
                 </a>