docs(example): setup example

.angular-cli.json

@@ -46,7 +46,7 @@
       "testTsconfig": "../../../tsconfig.spec.json",
       "prefix": "app",
       "styles": [
-        "styles.css"
+        "styles.scss"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",
@@ -72,7 +72,7 @@
       "testTsconfig": "../../../tsconfig.spec.json",
       "prefix": "app",
       "styles": [
-        "styles.css"
+        "styles.scss"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",
@@ -99,7 +99,7 @@
     "schematics": {
       "collection": "@nrwl/schematics"
     },
-    "styleExt": "css",
+    "styleExt": "scss",
     "component": {}
   },
   "warnings": {

apps/angular5-example/src/app/app.component.html

@@ -1,17 +1,50 @@
-<star-rating-comp></star-rating-comp>
-<div style="text-align:center">
-  <h1>
-    Welcome to an Angular CLI app built with Nrwl Nx!
-  </h1>
-  <img width="300" src="assets/nx-logo.png">
-</div>
+<div id="main-container" class="container-fluid">
+  <nav id="main-menu" class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
+    <a class="navbar-brand" href="#">Dashboard</a>
+    <button class="navbar-toggler d-lg-none"
+            type="button"
+      data-toggle="collapse"
+      data-target="#mainNavbar"
+      aria-controls="mainNavbar"
+      aria-expanded="false"
+      aria-label="Toggle navigation"
+      (click)="toggleNav()">
+      <span class="navbar-toggler-icon"></span>
+    </button>
 
-<h2>Nx</h2>
-
-An open source toolkit for enterprise Angular applications.
-
-Nx is designed to help you create and build enterprise grade Angular applications. It provides an opinionated approach to application project structure and patterns.
-
-<h2>Quick Start & Documentation</h2>
-
-<a href="https://nrwl.io/nx">Watch a 5-minute video on how to get started with Nx.</a>
+    <div class=" navbar-collapse" id="mainNavbar"
+          [ngClass]="{collapse:navBarCollapsed}">
+      <ul class="navbar-nav mr-auto">
+        <li class="nav-item" routerLinkActive="active">
+          <a class="nav-link" [routerLink]="['form']"
+            (click)="toggleNav(true)">Minimal From Setup</a>
+        </li>
+        <li class="nav-item" routerLinkActive="active">
+          <a class="nav-link" [routerLink]="['events']"
+            (click)="toggleNav(true)">Event Bindings</a>
+        </li>
+        <li class="nav-item" routerLinkActive="active">
+          <a class="nav-link" [routerLink]="['kitchensink']"
+            (click)="toggleNav(true)">Kitchensink</a>
+        </li>
+        <li class="nav-item" routerLinkActive="active">
+          <a class="nav-link" [routerLink]="['config']"
+            (click)="toggleNav(true)">Config</a>
+        </li>
+        <li class="nav-item" routerLinkActive="active">
+          <a class="nav-link"
+            (click)="toggleNav(true)">All Bindings</a>
+        </li>
+      </ul>
+    </div>
+  </nav>
+  <div id="main-content" class="row">
+    <aside id="sidebar" class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar">
+      <nav id="side-nav">
+      </nav>
+    </aside>
+    <main id="main-" class="col-sm-9 ml-sm-auto col-md-10 pt-3">
+      <router-outlet></router-outlet>
+    </main>
+  </div>
+</div>

apps/angular5-example/src/app/app.component.ts

@@ -1,12 +1,22 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+import {StarRatingConfig} from 'angular-star-rating'
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  templateUrl: './app.component.html'
 })
-export class AppComponent implements OnInit {
-  constructor() {}
+export class AppComponent {
+  navBarCollapsed = true;
+  constructor() {
+  }
+
+
+  toggleNav(closeOnly?:boolean) {
+    if(closeOnly) {
+      this.navBarCollapsed = true;
+    } else {
+      this.navBarCollapsed = !this.navBarCollapsed;
+    }
+  }
 
-  ngOnInit() {}
 }

apps/angular5-example/src/app/app.module.ts

@@ -1,12 +1,54 @@
-import { NgModule } from '@angular/core';
-import { AppComponent } from './app.component';
-import { BrowserModule } from '@angular/platform-browser';
-import { NxModule } from '@nrwl/nx';
-import {StarRatingModule} from '@angular-star-rating-workspace/angular-star-rating'
+import {NgModule} from '@angular/core';
+import {ReactiveFormsModule} from '@angular/forms';
+import {BrowserModule} from '@angular/platform-browser';
+import {StarRatingModule} from 'angular-star-rating';
+import {AppComponent} from './app.component';
+import {FormTestComponent} from './components/form-test/form-test.component';
+import {MyFormComponent} from './components/my-form-component-minimal/form-test.component';
+import {MyEventsComponent} from './components/my-events/my-events.component';
+import {RouterModule} from '@angular/router';
+import {BindingsConfigFormComponent} from './components/bindings-config-form/bindings-config-form.component';
 
 @NgModule({
-  imports: [BrowserModule, NxModule.forRoot(), StarRatingModule.forRoot()],
-  declarations: [AppComponent],
+  declarations: [
+    AppComponent,
+    FormTestComponent,
+    MyFormComponent,
+    MyEventsComponent,
+    BindingsConfigFormComponent
+  ],
+  imports: [
+    BrowserModule,
+    ReactiveFormsModule,
+    StarRatingModule.forRoot(),
+    RouterModule.forRoot(
+      [
+        {
+          path:'',
+          redirectTo: 'form',
+          pathMatch: 'full'
+        },
+        {
+          path:'kitchensink',
+          component: BindingsConfigFormComponent
+        },
+        {
+          path:'events',
+          component: MyEventsComponent
+        },
+        {
+          path:'form',
+          component: MyFormComponent
+        },
+        {
+          path:'**',
+          redirectTo: 'form'
+        }
+      ]
+    )
+  ],
+  providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule {}
+export class AppModule {
+}