From cff75c68933ebf6d2737a33f84dcb4076d1fd974 Mon Sep 17 00:00:00 2001
From: SteveSandersonMS <stevesa@microsoft.com>
Date: Wed, 28 Sep 2016 11:30:34 +0100
Subject: [PATCH] Example of using PrimeNG

---
 templates/Angular2Spa/ClientApp/app/app.module.ts           | 6 +++++-
 .../ClientApp/app/components/home/home.component.html       | 4 ++++
 .../ClientApp/app/components/home/home.component.ts         | 1 +
 templates/Angular2Spa/package.json                          | 2 ++
 templates/Angular2Spa/webpack.config.vendor.js              | 6 +++++-
 5 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/templates/Angular2Spa/ClientApp/app/app.module.ts b/templates/Angular2Spa/ClientApp/app/app.module.ts
index 6d912da..a193d0a 100644
--- a/templates/Angular2Spa/ClientApp/app/app.module.ts
+++ b/templates/Angular2Spa/ClientApp/app/app.module.ts
@@ -1,11 +1,13 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
+import { FormsModule } from '@angular/forms';
 import { UniversalModule } from 'angular2-universal';
 import { AppComponent } from './components/app/app.component'
 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 { RatingModule } from 'primeng/primeng';
 
 @NgModule({
     bootstrap: [ AppComponent ],
@@ -24,7 +26,9 @@ import { CounterComponent } from './components/counter/counter.component';
             { path: 'counter', component: CounterComponent },
             { path: 'fetch-data', component: FetchDataComponent },
             { path: '**', redirectTo: 'home' }
-        ])
+        ]),
+        FormsModule,
+        RatingModule
     ]
 })
 export class AppModule {
diff --git a/templates/Angular2Spa/ClientApp/app/components/home/home.component.html b/templates/Angular2Spa/ClientApp/app/components/home/home.component.html
index 034d34e..9bfd41f 100644
--- a/templates/Angular2Spa/ClientApp/app/components/home/home.component.html
+++ b/templates/Angular2Spa/ClientApp/app/components/home/home.component.html
@@ -14,3 +14,7 @@
     <li><strong>Hot module replacement</strong>. In development mode, you don't even need to reload the page after making most changes. Within seconds of saving changes to files, your Angular 2 app will be rebuilt and a new instance injected is into the page.</li>
     <li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled, and the <code>webpack</code> build tool produces minified static CSS and JavaScript files.</li>
 </ul>
+
+<h1>PrimeNG example</h1>
+Rating: {{ ratingValue }}
+<p-rating [(ngModel)]="ratingValue"></p-rating>
diff --git a/templates/Angular2Spa/ClientApp/app/components/home/home.component.ts b/templates/Angular2Spa/ClientApp/app/components/home/home.component.ts
index 16b817c..aa2ed6f 100644
--- a/templates/Angular2Spa/ClientApp/app/components/home/home.component.ts
+++ b/templates/Angular2Spa/ClientApp/app/components/home/home.component.ts
@@ -5,4 +5,5 @@ import { Component } from '@angular/core';
     template: require('./home.component.html')
 })
 export class HomeComponent {
+    public ratingValue: number;
 }
diff --git a/templates/Angular2Spa/package.json b/templates/Angular2Spa/package.json
index c1c5384..6831572 100644
--- a/templates/Angular2Spa/package.json
+++ b/templates/Angular2Spa/package.json
@@ -36,9 +36,11 @@
     "aspnet-prerendering": "^1.0.6",
     "bootstrap": "^3.3.7",
     "es6-shim": "^0.35.1",
+    "font-awesome": "^4.6.3",
     "isomorphic-fetch": "^2.2.1",
     "jquery": "^2.2.1",
     "preboot": "^4.5.2",
+    "primeng": "^1.0.0-beta.16",
     "rxjs": "5.0.0-beta.12",
     "zone.js": "^0.6.21"
   }
diff --git a/templates/Angular2Spa/webpack.config.vendor.js b/templates/Angular2Spa/webpack.config.vendor.js
index 5853c8d..abb7a6a 100644
--- a/templates/Angular2Spa/webpack.config.vendor.js
+++ b/templates/Angular2Spa/webpack.config.vendor.js
@@ -10,7 +10,7 @@ module.exports = {
     },
     module: {
         loaders: [
-            { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' },
+            { test: /\.(png|gif|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' },
             { test: /\.css(\?|$)/, loader: extractCSS.extract(['css']) }
         ]
     },
@@ -30,7 +30,11 @@ module.exports = {
             'bootstrap/dist/css/bootstrap.css',
             'es6-shim',
             'es6-promise',
+            'font-awesome/css/font-awesome.css',
             'jquery',
+            'primeng/primeng',
+            'primeng/resources/themes/omega/theme.css',
+            'primeng/resources/primeng.min.css',
             'zone.js',
         ]
     },