Example of using PrimeNG

Author: SteveSandersonMS

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
 ]
 })
 exportclassAppModule{

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

@@ -14,3 +14,7 @@ <h1>Hello, world!</h1>
 <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>

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

@@ -5,4 +5,5 @@ import{Component } from '@angular/core'
 template: require('./home.component.html')
 })
 exportclassHomeComponent{
+publicratingValue: number;
 }

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"
  }

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',
 ]
 },