diff --git a/README.md b/README.md
index af0b230..68132fa 100644
--- 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
new file mode 100644
index 0000000..55ea98b
--- /dev/null
+++ b/public/stop-watch-app.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+ Ng Elements Playground
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/demos/stop-watch/stop-watch-app.ngelement.ts b/src/demos/stop-watch/stop-watch-app.ngelement.ts
new file mode 100644
index 0000000..7a7af1c
--- /dev/null
+++ 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
new file mode 100644
index 0000000..f74d411
--- /dev/null
+++ 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
new file mode 100644
index 0000000..45c8f6a
--- /dev/null
+++ 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: `
+ Stop Watch App
+
+
+
+
+
+
+
+
+ `,
+ 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
new file mode 100644
index 0000000..d112312
--- /dev/null
+++ 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
new file mode 100644
index 0000000..3a5deac
--- /dev/null
+++ 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: `
+
+
{{hours}}
+
:
+
{{minutes}}
+
:
+
{{seconds}}
+
:
+
{{milliseconds}}
+