Example of using PrimeNG

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 {

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>

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

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

@@ -19,7 +19,6 @@
                 </li>
                 <li [routerLinkActive]="['link-active']">
                     <a [routerLink]="['/counter']">
-                        <i class="fa fa-camera-retro"></i>
                         <span class='glyphicon glyphicon-education'></span> Counter
                     </a>
                 </li>

templates/Angular2Spa/package.json

@@ -40,6 +40,7 @@
     "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']) }
         ]
     },
@@ -32,6 +32,9 @@ module.exports = {
             'es6-promise',
             'font-awesome/css/font-awesome.css',
             'jquery',
+            'primeng/primeng',
+            'primeng/resources/themes/omega/theme.css',
+            'primeng/resources/primeng.min.css',
             'zone.js',
         ]
     },