docs(github-page): update live demo

README.MD

@@ -47,7 +47,7 @@ Fully featured this component is provided with:
 
 ## DEMO
 - [x] [Stackblitz Demo](https://stackblitz.com/edit/angular-star-rating-demo?file=app%2Fapp.component.html)
-- [x] [Live Demo](https://biophoton.github.io/angular-star-rating/#/kitchensink)
+- [x] [Live Demo](https://biophoton.github.io/angular-star-rating)
 - [x] [Example-App Sources](https://github.com/BioPhoton/angular-star-rating/tree/master/examples/angular4)
 
 ## [Documentation](https://github.com/BioPhoton/angular-star-rating/wiki)

apps/angular5-example/src/app/components/custom-stars/custom-stars.component.html

@@ -0,0 +1,50 @@
+
+<div class="row">
+  <div class="col" [formGroup]="form">
+    <div class="form-group">
+      <label>Rating</label>
+      <input type="number" class="form-control" placeholder="rating"
+        step="0.5" formControlName="rating">
+    </div>
+    <!--
+    <div class="form-group">
+      <label>Empty Star</label>
+      <select class="form-control" formControlName="empty">
+        <option [ngValue]="">none</option>
+        <ng-template ngFor let-opt [ngForOf]="icons">
+          <option [value]="opt">{{opt}}</option>
+        </ng-template>
+      </select>
+    </div>
+    <div class="form-group">
+      <label>Half Star</label>
+      <select class="form-control" formControlName="half">
+        <option [ngValue]="">none</option>
+        <ng-template ngFor let-opt [ngForOf]="icons">
+          <option [value]="opt">{{opt}}</option>
+        </ng-template>
+      </select>
+    </div>
+    <div class="form-group">
+      <label>Filled Star</label>
+      <select class="form-control" formControlName="filled">
+        <option [ngValue]="">none</option>
+        <ng-template ngFor let-opt [ngForOf]="icons">
+          <option [value]="opt">{{opt}}</option>
+        </ng-template>
+      </select>
+    </div>
+  </div>
+  <div class="col">
+    <div class="form-group">
+      <label>&nbsp;</label>
+      <star-rating-comp
+        [hoverEnabled]="true"
+        [showHalfStars]="true"
+        [rating]="form.get('rating').value">
+      </star-rating-comp>
+    </div>
+    -->
+  </div>
+</div>
+

apps/angular5-example/src/app/components/custom-stars/custom-stars.component.ts

@@ -0,0 +1,76 @@
+import {StarRatingConfigService} from '@angular-star-rating-lib/angular-star-rating';
+import {Component, ViewEncapsulation} from '@angular/core';
+import {FormBuilder, FormGroup} from '@angular/forms';
+import {CustomIconsConfigService} from './custom-star-config.service';
+
+@Component({
+  selector: 'app-custom-stars',
+  templateUrl: './custom-stars.component.html',
+  styles: [`
+    .star .fas {
+      font-size: 17px !important;
+    }
+  `],
+  providers: [
+    {
+      provide: StarRatingConfigService,
+      useClass: CustomIconsConfigService
+    }
+  ],
+  encapsulation: ViewEncapsulation.None
+})
+export class CustomStarsComponent {
+
+  form: FormGroup;
+
+  icons: string[] = [
+    'fa-500px',
+    'fa-accessible-icon',
+    'fa-accusoft',
+    'fa-address-book',
+    'fa-address-card',
+    'fa-adjust',
+    'fa-adn',
+    'fa-adversal',
+    'fa-affiliatetheme',
+    'fa-algolia',
+    'fa-align-center',
+    'fa-align-justify',
+    'fa-align-left',
+    'fa-align-right',
+    'fa-allergies',
+    'fa-amazon',
+    'fa-amazon-pay',
+    'fa-ambulance',
+    'fa-american-sign-language-interpreting',
+    'fa-amilia',
+    'fa-anchor',
+    'fa-android',
+    'fa-angellist',
+    'fa-angle-double-down',
+    'fa-angle-double-left',
+    'fa-angle-double-right',
+    'fa-angle-double-up',
+    'fa-angle-down'
+  ];
+
+  constructor(fb: FormBuilder, sRCS:  StarRatingConfigService) {
+    this.form = fb.group({
+      rating: [1.5],
+      empty:[],
+      half:[],
+      filled:[]
+    });
+
+    this.form.valueChanges
+      .subscribe(
+        (formValue) => {
+          sRCS.classEmpty = formValue.half;
+          sRCS.classHalf = formValue.half;
+          sRCS.classFilled = formValue.half;
+        }
+      )
+  }
+
+
+}

apps/angular5-example/src/app/components/custom-style/custom-style.component.scss

@@ -0,0 +1,10 @@
+$color-negative-rating: #ffff00;
+$color-ok-rating: #00ff00;
+$color-positive-rating: #ff00ff;
+$color-default-rating: #00f;
+@import "~css-star-rating/scss/star-rating";
+
+.rating.color-ok .star-container .star svg {
+  fill: #000 !important;
+}
+

apps/angular5-example/src/app/components/custom-style/custom-style.component.ts

@@ -0,0 +1,11 @@
+import {Component, OnInit, ViewEncapsulation} from '@angular/core';
+
+@Component({
+  selector: 'app-custom-style',
+  template: `
+    Custom Style
+    <star-rating-comp></star-rating-comp>`,
+  styleUrls: ['./custom-style.component.scss'],
+  //encapsulation: ViewEncapsulation.None
+})
+export class CustomStyleComponent { }