docs(example): polish example

BioPhoton · Apr 2, 2018 · f07fb24 · f07fb24
1 parent 70e5aa6
commit f07fb24
Show file tree

Hide file tree

Showing 16 changed files with 434 additions and 286 deletions.
diff --git a/apps/angular5-example/src/app/app.component.html b/apps/angular5-example/src/app/app.component.html
@@ -43,11 +43,7 @@
     </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">
+    <main id="main" class="col">
       <router-outlet></router-outlet>
     </main>
   </div>

diff --git a/apps/angular5-example/src/app/app.module.ts b/apps/angular5-example/src/app/app.module.ts
@@ -1,15 +1,15 @@
-import {StarRatingModule} from '@angular-star-rating-lib/angular-star-rating';
-import {NgModule} from '@angular/core';
-import {ReactiveFormsModule} from '@angular/forms';
-import {BrowserModule} from '@angular/platform-browser';
-import {RouterModule} from '@angular/router';
-import {NxModule} from '@nrwl/nx';
-import {AppComponent} from './app.component';
-import {EventBindingsComponent} from './components/event-bindings/event-bindings.component';
-import {FormControlStarRatingComponent} from './components/form-control-star-rating/form-control-star-rating.component';
-import {KitchensinkComponent} from './components/kitchensink/kitchensink.component';
-import {PropertyBindingsComponent} from './components/property-bindings/property-bindings.component';
-import {StaticModuleModule} from './static-module/static-module.module';
+import { StarRatingModule } from '@angular-star-rating-lib/angular-star-rating';
+import { NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+import { NxModule } from '@nrwl/nx';
+import { AppComponent } from './app.component';
+import { EventBindingsComponent } from './components/event-bindings/event-bindings.component';
+import { FormControlStarRatingComponent } from './components/form-control-star-rating/form-control-star-rating.component';
+import { KitchensinkComponent } from './components/kitchensink/kitchensink.component';
+import { PropertyBindingsComponent } from './components/property-bindings/property-bindings.component';
+import { StaticModuleModule } from './static-module/static-module.module';
 
 const DECLARATIONS = [
   AppComponent,
@@ -25,7 +25,8 @@ const DECLARATIONS = [
     ReactiveFormsModule,
     StaticModuleModule,
     StarRatingModule.forRoot(),
-    RouterModule.forRoot([
+    RouterModule.forRoot(
+      [
         {
           path: '',
           redirectTo: 'form',
@@ -46,7 +47,8 @@ const DECLARATIONS = [
         // static-config-override routes in its module
         {
           path: 'lazy-config-override',
-          loadChildren: 'apps/angular5-example/src/app/lazy-module/lazy-module.module#LazyModuleModule'
+          loadChildren:
+            'apps/angular5-example/src/app/lazy-module/lazy-module.module#LazyModuleModule'
         },
         {
           path: 'kitchensink',
@@ -66,5 +68,4 @@ const DECLARATIONS = [
   providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule {
-}
+export class AppModule {}
diff --git a/apps/angular5-example/src/app/components/event-bindings/event-bindings.component.ts b/apps/angular5-example/src/app/components/event-bindings/event-bindings.component.ts
@@ -1,22 +1,30 @@
-import { Component } from '@angular/core';
 import {
   ClickEvent,
   HoverRatingChangeEvent,
   RatingChangeEvent
 } from '@angular-star-rating-lib/angular-star-rating';
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'events-binings',
-  template: `<star-rating-comp
-                  [hoverEnabled]="true"
-                  (starClickChange)="onClick($event)" 
-                  (ratingChange)="onRatingChange($event)"
-                  (hoverRatingChange)="onHoverRatingChange($event)">                             
-            </star-rating-comp>
-            <p>onHoverRatingChangeResult: {{onHoverRatingChangeResult | json}}</p>
-            <p>onClickResult: {{onClickResult | json}}</p>
-            <p>onRatingChangeResult: {{onRatingChangeResult | json}}</p>
-    `
+  template: `
+    <div class="container">
+      <div class="row">
+        <div class="col">
+          <h1>Event Bindings</h1>
+          <star-rating-comp
+            [hoverEnabled]="true"
+            (starClickChange)="onClick($event)"
+            (ratingChange)="onRatingChange($event)"
+            (hoverRatingChange)="onHoverRatingChange($event)">
+          </star-rating-comp>
+          <p>onHoverRatingChangeResult: {{onHoverRatingChangeResult | json}}</p>
+          <p>onClickResult: {{onClickResult | json}}</p>
+          <p>onRatingChangeResult: {{onRatingChangeResult | json}}</p>
+        </div>
+      </div>
+    </div>
+  `
 })
 export class EventBindingsComponent {
   onClickResult: ClickEvent;

diff --git a/...example/src/app/components/form-control-star-rating/form-control-star-rating.component.ts b/...example/src/app/components/form-control-star-rating/form-control-star-rating.component.ts
@@ -1,23 +1,31 @@
-import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import {Component} from '@angular/core';
+import {FormBuilder, FormControl, FormGroup} from '@angular/forms';
 
 @Component({
   selector: 'app-form-test',
-  template: `<form [formGroup]="form" (submit)="onSubmit()">
-    <star-rating-comp
-      [labelText]="'Rating as form control'"
-      [rating]="rating"
-      formControlName="ratingInput" ></star-rating-comp>
+  template: `
+    <div class="container">
+      <div class="row">
+        <div class="col">
+          <h1>Form Control</h1>
+          <form [formGroup]="form" (submit)="onSubmit()">
+            <star-rating-comp
+              [labelText]="'Rating as form control'"
+              [rating]="rating"
+              formControlName="ratingInput"></star-rating-comp>
 
-    <div class="stock-inventory__buttons">
-      <button
-        type="submit"
-        [disabled]="form.invalid">
-        Submit
-      </button>
+            <div class="stock-inventory__buttons">
+              <button
+                type="submit"
+                [disabled]="form.invalid">
+                Submit
+              </button>
+            </div>
+            <pre>{{ form.value | json }}</pre>
+          </form>
+        </div>
+      </div>
     </div>
-    <pre>{{ form.value | json }}</pre>
-  </form>
   `
 })
 export class FormControlStarRatingComponent {