final changes submitted

Author: ashish-chopra

apps/demo/src/app/app.component.css

@@ -29,10 +29,11 @@ html, body {
 }
 
 footer {
-    background-color: #f7f7f7;
+    background-color: #d7d7d7;
     padding: 3rem 0;
     margin-top: 4rem;
-    font-size: 85%;
+    min-height: 500px;
+    /* font-size: 85%; */
 }
 
 footer ul {

apps/demo/src/app/app.component.html

@@ -8,13 +8,13 @@
           fill="currentColor" class="octo-body"></path>
   </svg>
 </a>
-<nav class="navbar navbar-toggleable-md fixed-top navbar-light">
+<nav class="navbar navbar-expand fixed-top navbar-light">
   <div class="container">
       <a class="navbar-brand" href="#/">ngx-gauge</a>
-      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
+      <!-- <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
           aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
-          </button>
+          </button> -->
 
       <div class="collapse navbar-collapse" id="navbarSupportedContent">
           <ul class="navbar-nav mr-auto">
@@ -38,22 +38,19 @@
   <app-getting-started id="getting-started" class="jumptarget"></app-getting-started>
   <app-documentation id="documentation" class="jumptarget"></app-documentation>
   <app-demos id="demos" class="jumptarget"></app-demos>
-  <app-playground id="documentation" class="jumptarget"></app-playground>
-  <!--<div ng-view autoscroll></div>-->
-  <!-- <section id="getting-started" class="jumptarget" ng-include="'templates/getting-started.html'"></section>
-  <section id="documentation" class="jumptarget" ng-include="'templates/documentation.html'"></section>
-  <section id="demos" class="jumptarget" ng-include="'templates/demos.html'"></section>
-  <section id="playground" class="jumptarget" ng-include="'templates/playground.html'"></section> -->
-
+  <app-playground id="playground" class="jumptarget"></app-playground>
   <footer>
       <div class="container footer-box">
           <div>
-              <div>&copy; copyright 2017-2021 Ashish Chopra. <br> Thanks to <b> GitHub &middot; Angular &middot; Highlightjs &middot; Bootstrap 4 &middot; Font Awesome</b>                        for giving technologies to build this website.
+              <div>&copy; copyright 2017-2021 Ashish Chopra. 
+                <br> <br><br> Thanks to <b> GitHub &middot; Angular &middot; Highlightjs &middot; Bootstrap 4 &middot; Font Awesome</b>                        for giving technologies to build this website.
+                <br> Thanks to <a href="https://github.com/pixelsyndicate" target="_blank">Wil Dobson</a> for contributing the playground section code in this website. It was huge time-saver for me.
               </div>
               <br>
               <div>
                   Made with hands &amp; <i class="fa fa-heart"></i> by <a href="https://ashishchopra.co">Ashish Chopra</a>.
                   <br> Checkout my other <a href="https://github.com/ashish-chopra?tab=repositories">projects</a>.
+                 
               </div>
           </div>
           <div>

apps/demo/src/app/demos/demos.component.html

@@ -225,13 +225,44 @@ <h4>Gauge Themes</h4>
         <div class="column-item">
             <div class="output-frame">
                 <ngx-gauge size="150" type="arch" thick="7" value="68.2" cap="round" label="Speed" append="mph"
-                    foreground-color="#2980b9" background-color="#ecf0f1">
+                    foregroundColor="#2980b9" backgroundColor="#ecf0f1">
                 </ngx-gauge>
                 <ngx-gauge size="150" type="arch" thick="7" value="68.2" cap="round" label="Speed" append="mph"
-                    foreground-color="#2ecc71" background-color="#ecf0f1">
+                    foregroundColor="#2ecc71" backgroundColor="#ecf0f1">
                 </ngx-gauge>
                 <ngx-gauge size="150" type="arch" thick="7" value="68.2" cap="round" label="Speed" append="mph"
-                    foreground-color="#e74c3c" background-color="#ecf0f1">
+                    foregroundColor="#e74c3c" backgroundColor="#ecf0f1">
+                </ngx-gauge>
+            </div>
+        </div>
+    </div>
+    <div class="column-box">
+
+        <div class="column-item">
+            <mat-tab-group dynamicHeight="true">
+                <mat-tab label="Description">
+                    <div class="content">
+                        <h4>Custom Directive for Display</h4>
+                        The gauge has three custom directives which can be used to modify the representation of the content displayed in the gauge
+                        which is beyond configuring just properties. For example, if you want to show an icon with the value to indicate increase or decrease is shown at the right.
+                       <pre [highlight]="customMarkup1"></pre>
+                    </div>
+                </mat-tab>
+                <mat-tab label="Markup">
+                    <div class="content">
+                        This is the code for the demo shown on the right:
+
+                        <pre [highlight]="customMarkup2"></pre>
+                    </div>
+                </mat-tab>
+            </mat-tab-group>
+        </div>
+        <div class="column-item">
+            <div class="output-frame">
+                <ngx-gauge size="180" type="arch" thick="7" value="68.2" cap="round" label="Revenue" append="%">
+                    <ngx-gauge-prepend>
+                        <i class="fa fa-caret-up" style="color: green"></i>
+                    </ngx-gauge-prepend>
                 </ngx-gauge>
             </div>
         </div>

apps/demo/src/app/demos/demos.component.ts

@@ -100,6 +100,29 @@ export class DemosComponent {
 
 }
 `
+const customMarkup1=  `
+<ngx-gauge [value]="currentValue">
+    <ngx-gauge-append>
+        <!-- custom append text or HTML goes here -->
+    </ngx-gauge-append>
+    <ngx-gauge-label>
+        <!-- custom label text or HTML goes here -->
+    </ngx-gauge-label>
+    <ngx-gauge-prepend>
+        <!-- custom prepend text or HTML goes here -->
+    </ngx-gauge-prepend>
+    <ngx-gauge-value>
+        {{ currentValue * Math.PI | number }}
+    </ngx-gauge-value>
+</ngx-gauge>
+`;
+const customMarkup2 = `<ngx-gauge size="180" type="arch" thick="7" 
+          value="68.2" cap="round" 
+          label="Revenue" append="%">
+    <ngx-gauge-prepend>
+        <i class="fa fa-caret-up" style="color: green"></i>
+    </ngx-gauge-prepend>
+</ngx-gauge>`;
 
 @Component({
   selector: 'app-demos',
@@ -124,6 +147,8 @@ export class DemosComponent implements OnInit {
   themesMarkup1 = themesMarkup1;
   dynamicGaugeDemoMarkup1 = dynamicGaugeDemoMarkup1;
   dynamicGaugeDemoTS1 = dynamicGaugeDemoTS1;
+  customMarkup1 = customMarkup1;
+  customMarkup2 = customMarkup2;
 
   dynamicGaugeDemoValue = 10.2;
 

apps/demo/src/index.html

@@ -3,6 +3,7 @@
 <head>
   <meta charset="utf-8">
   <title>ngx-gauge - A customizable Gauge Component for Angular 4 and Beyond.</title>
+  <!-- <base href="/ngx-gauge/"> -->
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">