robwormald · AhsanAyaz · Oct 17, 2017 · Oct 17, 2017
diff --git a/README.md b/README.md
@@ -2,6 +2,7 @@
 
 Sketching out hosting Angular Components as Custom Elements / Web Components
 
+##### Note : Scroll down to see development guidelines
 
 
 #### Angular Component API (4.x)
@@ -86,3 +87,25 @@ class MyCustomElement extends HTMLElement {
 
 ```
 
+
+#### Development
+
+Install the dependencies
+
+```bash
+npm install
+#or
+yarn
+```
+
+Build the demos
+```bash
+npm run build
+```
+
+You can serve the project using any server, for instance [http-server](https://www.npmjs.com/package/http-server)
+```bash
+http-server ./public
+
+#navigate to localhost:8080
+```
diff --git a/public/stop-watch-app.html b/public/stop-watch-app.html
@@ -0,0 +1,15 @@
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <title>Ng Elements Playground</title>
+        <script src="es5-shim.js"></script>
+        <script src="angular.js"></script>
+        <script src="stop-watch-app.js" async></script>
+    </head>
+    <body>
+        <stop-watch-app></stop-watch-app>
+    </body>
+</html>
+
diff --git a/src/demos/stop-watch/stop-watch-app.ngelement.ts b/src/demos/stop-watch/stop-watch-app.ngelement.ts
@@ -0,0 +1,4 @@
+import nge from '../../custom_element_adapter'
+import { StopWatchAppNgFactory } from '../../ngfactory/src/demos/stop-watch/stop-watch.app.ngfactory';
+
+nge.define( StopWatchAppNgFactory );
diff --git a/src/demos/stop-watch/stop-watch-module.ts b/src/demos/stop-watch/stop-watch-module.ts
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core'
+import { NgDirectivesModule } from '../../directives/ng_directives'
+import { StopWatchApp } from './stop-watch.app';
+import { StopWatch } from './stop-watch';
+
+@NgModule({
+  id: 'stop-watch-app',
+  imports: [ NgDirectivesModule ],
+	declarations: [ StopWatchApp, StopWatch ]
+})
+export class StopWatchAppModule {}
diff --git a/src/demos/stop-watch/stop-watch.app.ts b/src/demos/stop-watch/stop-watch.app.ts
@@ -0,0 +1,157 @@
+import { Component, Input, ViewEncapsulation, ChangeDetectorRef } from '@angular/core'
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+
+export class WatchService {
+    /**
+     * @author Ahsan Ayaz
+     * @desc Calculates the units and sets in string format. 
+     * @param unit value of the unit in numbers
+     * @return {string} the string representation of the unit's value with at least 2 digits
+     */
+	getTimeString(unit: number): string {
+		return (unit ? (unit> 9 ? unit : "0" + unit) : '00').toString();
+	}
+}
+
+
+@Component({
+	selector: 'stop-watch-app',
+	template: `
+	  <h1>Stop Watch App</h1>
+      <div class="watch-container">
+        <stop-watch [hours]="hours" [minutes]="minutes" [seconds]="seconds" [milliseconds]="milliseconds"></stop-watch>
+      </div>
+      <div class="actions-container">
+        <button (click)="start()" [disabled]="isTimerRunning">Start</button>
+        <button (click)="stop()" [disabled]="!isTimerRunning">Stop</button>
+        <button (click)="clear()" [disabled]="isTimerRunning">Clear</button>
+      </div>
+	`,
+    encapsulation: ViewEncapsulation.Native,
+    providers: [ WatchService ],
+	styles: [
+		`
+		:host {
+			display: block;
+			height: 300px;
+			width: 300px;
+            margin: 0 auto;
+            padding-top: 20px;
+        }`,
+        `:host h1{
+            text-align: center;
+            font-family: system-ui;
+        }`,
+        `
+        .watch-container{
+            padding: 20px;
+        }`,
+        `button{
+            border-width: 0;
+            padding: 10px;
+            outline: none;
+            border-radius: 2px;
+            box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
+            background-color: #333;
+            color: #ecf0f1;
+        }`,
+        `button[disabled]{
+            background-color: #dcdcd;
+            color: black;
+            opacity: 0.7;
+        }`,
+        `
+        .actions-container{
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-evenly;
+        }`
+	]
+})
+export class StopWatchApp {
+    private hh = 0;
+    private mm = 0;
+    private ss = 0;
+    private ms = 0;
+    hours = '00';
+    minutes= '00';
+    seconds= '00';
+    milliseconds= '00';
+    timer: any = null;
+    isTimerRunning = false;
+	constructor(
+        private cdr:ChangeDetectorRef,
+        public watchService: WatchService
+    ){
+
+    }
+
+    /**
+     * @author Ahsan Ayaz
+     * @desc Starts the timer, updates ever 10 milliseconds
+     */
+	start() {
+        this.isTimerRunning = true;
+        this.cdr.detectChanges(); // changes the states of the buttons right away
+        this.timer = setInterval(() => { this.updateTime() }, 10);
+    }
+
+    /**
+     * @author Ahsan Ayaz
+     * @desc Updates the value of the units in for the watchf
+     */
+    updateTime() {
+        this.ms++;
+        if (this.ms >= 100) {
+            this.ms = 0;
+            this.ss++;
+            if (this.ss >= 60) {
+                this.ss = 0;
+                this.mm++;
+                if (this.mm >= 60) {
+                    this.mm = 0;
+                    this.hh++;
+                }
+            }
+        }
+        this.setTime();
+    }
+
+    /**
+     * @author Ahsan Ayaz
+     * @desc Updates the time for the watch component.
+     * Applies the detected changes.
+     */
+    setTime() {
+        this.hours = this.watchService.getTimeString(this.hh);
+        this.minutes = this.watchService.getTimeString(this.mm);
+        this.seconds = this.watchService.getTimeString(this.ss);
+        this.milliseconds = this.watchService.getTimeString(this.ms);
+        this.cdr.detectChanges();
+    }
+
+    /**
+     * @author Ahsan Ayaz
+     * @desc Stops the watch.
+     */
+    stop() {
+        this.isTimerRunning = false;
+        clearInterval(this.timer);
+        this.cdr.detectChanges();
+    }
+
+    /**
+     * @author Ahsan Ayaz
+     * @desc Clears the time of the watch.
+     */
+    clear() {
+        this.hh = 0;
+        this.mm = 0;
+        this.ss = 0;
+        this.ms = 0;
+        this.setTime();
+    }
+
+
+}
diff --git a/src/demos/stop-watch/stop-watch.ngelement.ts b/src/demos/stop-watch/stop-watch.ngelement.ts
@@ -0,0 +1,4 @@
+import nge from '../../custom_element_adapter'
+import { StopWatchNgFactory } from '../../ngfactory/src/demos/stop-watch/stop-watch.ngfactory';
+
+nge.define( StopWatchNgFactory );
diff --git a/src/demos/stop-watch/stop-watch.ts b/src/demos/stop-watch/stop-watch.ts
@@ -0,0 +1,46 @@
+import {Component, Input, Output, EventEmitter, ViewEncapsulation, ChangeDetectionStrategy} from '@angular/core'
+
+@Component({
+	selector: 'stop-watch',
+	template: `
+        <div class="watch">
+            <div class="unit">{{hours}}</div>
+            <div class="sep"> : </div>
+            <div class="unit">{{minutes}}</div>
+            <div class="sep"> : </div>
+            <div class="unit">{{seconds}}</div>
+            <div class="sep"> : </div>
+            <div class="unit">{{milliseconds}}</div>
+        </div>
+    `,
+    encapsulation: ViewEncapsulation.Native,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+	styles: [
+        `:host { 
+            background: #2196F3;
+            padding: 20px;
+            display: block;
+            font-family: monospace;
+            box-shadow: 0 16px 16px 0 rgba(0,0,0,0.1);
+         }`,
+        `
+        :host .watch{
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-evenly;
+        }`,
+        `
+        :host .watch .unit, :host .watch .sep{
+            font-size: 32px;
+            color: #FFEB3B;
+        }
+        `
+    ]
+})
+export class StopWatch {
+    @Input() hours: string;
+    @Input() minutes: string;
+    @Input() seconds: string;
+    @Input() milliseconds: string;
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -4,8 +4,10 @@ module.exports = {
 	entry: {
 		'todo-app': './lib/demos/todo-app/todo-app.ngelement.js',
 		'now-card-feed': './lib/demos/now-cards/now-card-feed.ngelement.js',
-    'now-card': './lib/demos/now-cards/now-card.ngelement.js',
-    'progress-bars': './lib/demos/progress-bar/progress-bar.ngelement.js',
+    	'now-card': './lib/demos/now-cards/now-card.ngelement.js',
+		'progress-bars': './lib/demos/progress-bar/progress-bar.ngelement.js',
+		'stop-watch-app': './lib/demos/stop-watch/stop-watch-app.ngelement.js',
+		'stop-watch': './lib/demos/stop-watch/stop-watch.ngelement.js',
 		'angular': ['@angular/core', './lib/custom_element_adapter.js']
 	},
 	output: {