Example of adding angular2-materialize in response for #394

templates/Angular2Spa/ClientApp/app/app.module.ts

@@ -6,10 +6,12 @@ import { NavMenuComponent } from './components/navmenu/navmenu.component';
 import { HomeComponent } from './components/home/home.component';
 import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
 import { CounterComponent } from './components/counter/counter.component';
+import { MaterializeDirective } from 'angular2-materialize';
 
 @NgModule({
     bootstrap: [ AppComponent ],
     declarations: [
+        MaterializeDirective,
         AppComponent,
         NavMenuComponent,
         CounterComponent,

templates/Angular2Spa/ClientApp/app/components/home/home.component.html

@@ -1,4 +1,20 @@
 <h1>Hello, world!</h1>
+
+<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>
+
 <p>Welcome to your new single-page application, built with:</p>
 <ul>
     <li><a href='https://get.asp.net/'>ASP.NET Core</a> and <a href='https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx'>C#</a> for cross-platform server-side code</li>

templates/Angular2Spa/ClientApp/boot-client.ts

@@ -1,4 +1,6 @@
 import 'angular2-universal-polyfills/browser';
+import 'materialize-css';
+import 'angular2-materialize';
 import { enableProdMode } from '@angular/core';
 import { platformUniversalDynamic } from 'angular2-universal';
 import { AppModule } from './app/app.module';